DEV Community

Cover image for Vite vue ts tailwind template: Convert styles to TailwindCSS classes and configs (Part 2)
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on

1

Vite vue ts tailwind template: Convert styles to TailwindCSS classes and configs (Part 2)

Replace existing styles with TailwindCSS classes in src/components/HelloWorld.vue

Replace for styles for a

  1. There is only color in a selector. Add new textColor as we did in previous article.
  2. Update our code

    diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
    index 7e9abbe..efb4ee8 100644
    --- a/src/components/HelloWorld.vue
    +++ b/src/components/HelloWorld.vue
    @@ -65,7 +65,7 @@ export default defineComponent({
    
     <style scoped>
     a {
    -  color: #42b983;
    +  @apply text-link;
     }
    
     label {
    diff --git a/tailwind.config.js b/tailwind.config.js
    index 8855955..eaabfc4 100644
    --- a/tailwind.config.js
    +++ b/tailwind.config.js
    @@ -8,7 +8,8 @@ module.exports = {
         },
         extend: {
           textColor: {
    -        default: '#2c3e50'
    +        default: '#2c3e50',
    +        link: '#42b983'
           }
         },
       },
    
  3. git add -u

  4. git commit -m 'add link color'

Replace styles for code

  1. First replace background-color. As with color we will add new color called code in backgroundColor by extending our theme.
  2. Then as with margin we will replace padding. Luckily there are classes that match our values.
  3. Finally, create a new textColor called code.
  4. Our code diff should look like this

    diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
    index efb4ee8..c761112 100644
    --- a/src/components/HelloWorld.vue
    +++ b/src/components/HelloWorld.vue
    @@ -68,15 +68,7 @@ a {
       @apply text-link;
     }
    
     code {
    -  background-color: #eee;
    -  padding: 2px 4px;
    -  border-radius: 4px;
    -  color: #304455;
    +  @apply bg-code py-0.5 px-1 text-code;
     }
     </style>
    diff --git a/tailwind.config.js b/tailwind.config.js
    index eaabfc4..d8ca082 100644
    --- a/tailwind.config.js
    +++ b/tailwind.config.js
    @@ -9,7 +9,11 @@ module.exports = {
         extend: {
           textColor: {
             default: '#2c3e50',
    -        link: '#42b983'
    +        link: '#42b983',
    +        code: '#304455',
    +      },
    +      backgroundColor: {
    +        code: '#eeeeee',
           }
         },
       },
    
  5. git add -u

  6. git commit -m 'replace code styles'

Links

Project

GitHub logo imomaliev / vue-ts-tailwind

Vite + Vue + TypeScript + TailwindCSS template

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay