How to add Tailwind to your Vue app

#vue #tailwindcss

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$/
      ],
    },
 }

Top comments (10)

Giles Butler • May 6 '20

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 • May 24 '20

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 • May 24 '20

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 • May 24 '20

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 • May 31 '20

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.