DEV Community

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

Posted on

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

Enable jit mode

If you haven't heard, TailwindCSS 2.1+ has a jit mode. It speeds up build times and allows a couple of extra features which take TailwindCSS's utility first approach to the next level

Enabling jit is pretty simple

  1. Update tailwind.config.js

    +  mode: 'jit',
    
  2. git add -u

  3. git commit -m 'enable tailwindcss jit'

Replace existing styles with TailwindCSS classes in src/App.vue

Replace font-family

  1. Our first CSS property is font-family inside #app styles. To set font-samily for TailwindCSS project, we will use fontFamily configuration in our theme section of tailwind.config.js
  2. Update our code

    diff --git a/src/App.vue b/src/App.vue
    index 1963bd4..9b68502 100644
    --- a/src/App.vue
    +++ b/src/App.vue
    @@ -17,7 +17,6 @@ export default defineComponent({
    
     <style>
     #app {
    -  font-family: Avenir, Helvetica, Arial, sans-serif;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       text-align: center;
    diff --git a/tailwind.config.js b/tailwind.config.js
    index 1858089..4d6d6e7 100644
    --- a/tailwind.config.js
    +++ b/tailwind.config.js
    @@ -2,6 +2,9 @@ module.exports = {
       purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
       darkMode: false, // or 'media' or 'class'
       theme: {
    +    fontFamily: {
    +      sans: ['Avenir', 'Helvetica', 'Arial', 'sans-serif'],
    +    },
         extend: {},
       },
       variants: {
    
  3. git add -u

  4. git commit -m 'set font as a part of a tailwind theme'

Replace -webkit-font-smoothing and -moz-osx-font-smoothing

  1. Next properties are -webkit-font-smoothing and -moz-osx-font-smoothing. There is already a utility class for these properties. So we will use it with @apply directive.
  2. Update our code

    diff --git a/src/App.vue b/src/App.vue
    index 9b68502..67fbaa8 100644
    --- a/src/App.vue
    +++ b/src/App.vue
    @@ -17,8 +17,6 @@ export default defineComponent({
    
     <style>
     #app {
    -  -webkit-font-smoothing: antialiased;
    -  -moz-osx-font-smoothing: grayscale;
    +  @apply antialiased;
       text-align: center;
       color: #2c3e50;
       margin-top: 60px;
    
  3. git add -u

  4. git commit -m 'replace -webkit-font-smoothing and -moz-osx-font-smoothing with antialiased utily class'

Replace text-align

  1. text-align is pretty straight forward as well. There are text alignment utilities.
  2. Update our code

    diff --git a/src/App.vue b/src/App.vue
    index 67fbaa8..5c978a6 100644
    --- a/src/App.vue
    +++ b/src/App.vue
    @@ -17,7 +17,6 @@ export default defineComponent({
    
     <style>
     #app {
    -  @apply antialiased;
    -  text-align: center;
    +  @apply antialiased text-center;
       color: #2c3e50;
       margin-top: 60px;
     }
    
  3. git add -u

  4. git commit -m 'replace text-align property with text-center class'

Replace color

  1. General color as font-family should be set in tailwind.config.js. We could use one of jit's features and set color inline with "Arbitrary value support" But in this case we will add a new color called default in textColor by extending our theme.
  2. Update our code

    diff --git a/src/App.vue b/src/App.vue
    index 5c978a6..08379dd 100644
    --- a/src/App.vue
    +++ b/src/App.vue
    @@ -17,7 +17,6 @@ export default defineComponent({
    
     <style>
     #app {
    -  @apply antialiased text-center;
    -  color: #2c3e50;
    +  @apply antialiased text-center text-default;
       margin-top: 60px;
     }
     </style>
    diff --git a/tailwind.config.js b/tailwind.config.js
    index c592ea4..8855955 100644
    --- a/tailwind.config.js
    +++ b/tailwind.config.js
    @@ -6,7 +6,11 @@ module.exports = {
         fontFamily: {
           sans: ['Avenir', 'Helvetica', 'Arial', 'sans-serif'],
         },
    -    extend: {},
    +    extend: {
    +      textColor: {
    +        default: '#2c3e50'
    +      }
    +    },
       },
       variants: {
         extend: {},
    
  3. git add -u

  4. git commit -m 'add default color'

Replace margin-top

  1. This is the last style in #app. TailwindCSS uses rem's for margin classes. We have margin-top: 60px; in rem's it would be 3.75. By default, there is no class for this value. We could add one, but I prefer just choosing the closest one from already preconfigured ones. Which will be mt-16.
  2. Update our code

    diff --git a/src/App.vue b/src/App.vue
    index 08379dd..93f2f31 100644
    --- a/src/App.vue
    +++ b/src/App.vue
    @@ -14,9 +14,3 @@ export default defineComponent({
       },
     })
     </script>
    
    <style>
    #app {
    -  @apply antialiased text-center text-default;
    -  margin-top: 60px;
    +  @apply antialiased text-center text-default m-16;
    }
    </style>
    
  3. git add -u

  4. git commit -m 'replace margin-top property with class'

Links

Project

GitHub logo imomaliev / vue-ts-tailwind

Template vite vue typescript tailwind

Discussion (0)