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

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

Discussion (0)