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

imomaliev / vue-ts-tailwind

Vite + Vue + TypeScript + TailwindCSS template

Comments

[Fatemeh Paghar]

When you convert styles to Tailwind CSS classes, it becomes simpler to create how your website looks. You use easy-to-understand classes to design without writing a lot of complicated code.

Instead of writing long lines of code for styles, TailwindCSS gives you short classes. This makes it much easier to understand and use, especially if you're just starting with web development.