How to add Tailwind to your Vue app

Updated for Tailwind v1.7.4+

Adding Tailwind to your Vue app is easy. No need to use an intermediate Vue library for it, especially since PurgeCSS is now baked in Tailwind!

Instructions

• Install Tailwind: npm install tailwindcss
• Create a CSS file (e.g. assets/css/tailwind.css) with the content below and import it in main.js (e.g. import '@/assets/css/tailwind.css').

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

Note: don't write these lines directly in App.vue, as this would increase the recompile time during development.

• Generate the Tailwind & PostCSS config files: npx tailwindcss init -p

Note: if you already have an existing postcss.config.js, add the following content.

• Configure PurgeCSS in tailwind.config.js:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  purge: [
      './public/**/*.html',
      './src/**/*.vue'
    ]
  }
}

Note: PurgeCSS is enabled automatically in production.

Whitelisting CSS

In tailwind.config.js , you can whitelist selectors to stop PurgeCSS from removing dynamically added classes from your CSS. For example, here is how to whitelist classes autogenerated by Vue:

purge: {
    content: ['./public/**/*.html', './src/**/*.vue'],
    options: {
      whitelistPatterns: [ 
    /-(leave|enter|appear)(|-(to|from|active))$/, 
    /^(?!(|.*?:)cursor-move).+-move$/,
        /^router-link(|-exact)-active$/
      ],
    },
 }

Comments

[Manuel Mejia]

Thanks, this post helped me to set up Tailwind in Vue real quick and easy.

[sage]

Thanks for the helpful post!

Tip: if you're using Tailwind 1.4.0 and up, PostCSS is already included, so there's no need to configure it manually.

[Jérôme Pott]

Ah yes, that's right. I need to update my post 😅 It's been in my todo list since the release of the v1.4.0.

[Giles Butler]

Thanks for the post.

Any idea how to include @tailwind utilities; after all your other css has been processed including your components CSS?

If you don't do this then the utility classes will get overwritten by any css you declare in your components.

[Jérôme Pott]

Hi! Glad to hear that my post was useful 😃

I think it's very unlikely that your custom CSS overrides Tailwind utilities by accident. Maybe when using another CSS Framework? Which I really don't recommend. But there's probably a way to prefix Tailwind in that case.

[Giles Butler]

Hi Jerome,

Why is it unlikely? It's more than likely unfortunately due to the way CSS works.

Any CSS selectors declared after @tailwind utilities; will have a higher specificity.

When you import your global tailwind css it's imported before all the css that's inside your single file components.

The only option I've found is to either enable !important tags in tailwind config or adding a prefix to the utilities. This requires you to add a custom id to a wrapper div when Vue loads - tailwindcss.com/docs/plugins/#pref...

[Jérôme Pott]

I just have a hard time picturing your use case. Why would you override Tailwind utility classes?
Do you have a GitHub repo to showcase your use case? Are you using Tailwind with another CSS framework?

[Giles Butler]

Hi Jerome,

You wouldn't want to override Tailwind utility classes. The way you suggested to import Tailwind in the article will cause single file components using scoped css to override the classes. This is due to the way css specificity works.

If you add a Tailwind utility class to a div in a single file component using the way you've set it up e.g <div class="bg-red-500"></div> and then add a scoped css declaration in that file e.g <div class="bg-red-500 some-div"></div> and...

<style scoped>
.some-div {
  @apply bg-blue-500;
}
</style>

The div will be blue instead of red due to the output becoming .some-div[data=32427] and that overriding .bg-red-500. Ideally you'd want to be able to write css for your components and override their styles with tailwind utility classes where you can.

[Jérôme Pott]

I've just watched a video that reminded me of our conversation:
youtu.be/v74SZBVMPa0?t=615

[Giles Butler]

Hi Jerome,

Thanks for following up, the layers feature is neat but a bit different use case to what we were talking about before.

Awesome to see how many features they’ve been adding recently though.