DEV Community

Jérôme Pott
Jérôme Pott

Posted on • Updated on

 

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;
Enter fullscreen mode Exit fullscreen mode

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'
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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$/
      ],
    },
 }
Enter fullscreen mode Exit fullscreen mode

Top comments (10)

Collapse
 
gilesbutler_24 profile image
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.

Collapse
 
mornir profile image
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.

Collapse
 
gilesbutler_24 profile image
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...

Thread Thread
 
mornir profile image
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?

Thread Thread
 
gilesbutler_24 profile image
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.

Thread Thread
 
mornir profile image
Jérôme Pott

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

Thread Thread
 
gilesbutler_24 profile image
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.

Collapse
 
laymonage profile image
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.

Collapse
 
mornir profile image
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.

Collapse
 
mejiamanuel57 profile image
Manuel Mejia

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