Add Tailwind CSS to a vuetify project

So you finished reading my article on the benefits of utility-first CSS (🤗) and want to try it out in your project, but it already uses a component library? Let me help you with that!

Note: I am sure you will find some useful tips here even if you are fighting with a library other than vuetify

Basic setup

Adding tailwind is actually pretty straight forward, but there a few hurdles to get around.

Start by installing tailwind

npm install tailwindcss

Next, let's create the CSS file that tailwind places all the classes inside. You could also add it to a vue file, but I didn't get it to work with purgeCSS which we will need to reduce the CSS to only the minimum.

Here is the code

/* resources/assets/css/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, let's instruct tailwind to create the config file, which we will tinker with later

npx tailwindcss init

To complete the basic setup follow step 4 here. This highly depends on your build setup. For example, I use laravel-mix to compile my assets, so I added the following to my webpack.mix.js file:

mix.postCss('resources/assets/css/app.css', 'public/css', [
    require('tailwindcss'),
    require('autoprefixer'),
]

Don't forget to import the css file in your HTML

Customizations

Tailwind should already work by now, but your project's layout probably changed here and there. There are two steps we have to take here:

1. Add a prefix to our tailwind classes
2. disable preflight

Some classnames are clashing between tailwindcss and vuetify. To avoid this, head over to the previously generated tailwind.config.js and add a prefix

module.exports = {
  prefix: 'tw-',
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

This means that, for example, instead of the class flex, the class name in your project will be tw-flex.

Next, tailwindcss gets rid of some cross-browser inconsistencies for us by default, but vuetify is doing the same thing already, so it's better to disable preflight in tailwindcss. Go back to tailwind.config.js and add:

module.exports = {
  corePlugins: {
    preflight: false,
  },
  prefix: 'tw-',
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

PurgeCSS

So far so good, let's tackle the last problem. TailwindCSS creates thousands of CSS classes, so if you take a look at your bundle size, it increased quite significantly! We can overcome this by adding purgeCSS, this will get rid of any unused CSS for us.

Note: Newer versions of Tailwind already come with purgeCSS support. Check the docs: https://tailwindcss.com/docs/controlling-file-size

First, install the package

npm install @fullhuman/postcss-purgecss --save-dev

Next, add it to your postCSS plugins (from tailwind documentation)

const purgecss = require('@fullhuman/postcss-purgecss')({
    // Specify the paths to all of the template files in your project 
    content: [ './resources/assets/js/**/*.vue' ],

    css: ['./resources/assets/css/app.css'],

    // Include any special characters you're using in this regular expression
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
})

mix.postCss('resources/assets/css/app.css', 'public/css',[
    require('tailwindcss'),
    require('autoprefixer'),
    purgecss,
])

And go to app.css and tell purgeCSS not to purge tailwind's base classes

/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */

@tailwind utilities;

Now let it compile and you will find your application in a very sad state with all the vuetify styles being removed :o

Right, so we need to tell purgeCSS to leave vuetify alone.

To do that head over to your main javascript file where you import vuetify's CSS like this:

import 'vuetify/dist/vuetify.min.css'

Get rid of it :)

Instead, let's add the import to our app.css file inside the purgecss ignore block

/* purgecss start ignore */
@import 'vuetify/dist/vuetify.min.css';
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */

@tailwind utilities;

In order for "@import" to work we need to install a custom package

npm install postcss-import

and register it in postCSS

mix.postCss('resources/assets/css/app.css', 'public/css',[
    require('tailwindcss'),
    require('autoprefixer'),
    require("postcss-import"),
    purgecss,
])

And we are almost done! You can now test it in the browser. But be aware that, at least with laravel-mix, the CSS will get purged only for the first compile. That means, if you keep a watch over changes, it will not "unpurge" new CSS classes you add. To overcome this, let's only purge our CSS when compiling for production:

mix.postCss('resources/assets/css/app.css', 'public/css',[
    require('tailwindcss'),
    require('autoprefixer'),
    require("postcss-import"),
    ...process.env.NODE_ENV === 'production' ? [purgecss] : []
])

お疲れ様です！