Add Tailwind CSS to a vuetify project
Tags: css, vue, tailwindcss
Published: 2020-03-08 22:36:01

> Originally posted at [michaelzanggl.com](https://michaelzanggl.com/articles/add-tailwind-css-to-vuetify). Subscribe to [my newsletter](https://michaelzanggl.com/) to never miss out on new content.

So you finished reading [my article](https://michaelzanggl.com/articles/utility-first-css/) 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

```bash
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

```css
/* 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

```bash
npx tailwindcss init
```

To complete the basic setup follow step 4 [here](https://tailwindcss.com/docs/installation#4-process-your-css-with-tailwind). 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:

```javascript
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

```javascript
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:

```javascript
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.

First, install the package

```bash
npm install @fullhuman/postcss-purgecss
```

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

```javascript
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

```css
/* 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:

```javascript
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**

```css
/* 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

```bash
npm install postcss-import
```

and register it in postCSS

```javascript
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:

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

お疲れ様です！