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-family 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

• https://tailwindcss.com/docs/just-in-time-mode
• https://tailwindcss.com/docs/text-color#text-colors
• https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
• https://tailwindcss.com/docs/configuration#theme
• https://tailwindcss.com/docs/font-family#customizing
• https://tailwindcss.com/docs/functions-and-directives#apply
• https://tailwindcss.com/docs/font-smoothing
• https://tailwindcss.com/docs/customizing-colors#extending-the-defaults
• https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
• https://tailwindcss.com/docs/margin
• https://tailwindcss.com/docs/margin#customizing

Project