How to install Tailwind CSS in Vue 3 with Vite

If you don't know how to get started with Vue 3 & Vite, I suggest reading my Creating your Vue 3 Project with Vite post.

To get started with Tailwind CSS, install the dependency.

Using Yarn :

$ yarn add tailwindcss

Using NPM :

$ npm install --save tailwindcss

And initialize the default config file.

$ npx tailwind ini

This should create a default Tailwind CSS configuration (tailwind.config.js file at the root of your project.

After that, create a postcss.config.js file at the root of your project with the following content.

module.exports = {
  plugins: [
    require('tailwindcss')
  ]
}

Once that is done, you can create your stylesheet.

You can create it wherever you prefer, I like to put them in my src/assets/css directory.

My file is named src/assets/css/style.css and I put the default Tailwind configuration.

@tailwind base;

@tailwind components;

@tailwind utilities;

Once that is done, you need to include it in your project. In a default Vue 3/Vite project you do that in the main.js file.

You can remove the default stylesheet

import './index.css'

And replace it with your new Tailwind CSS stylesheet

import './assets/css/style.css'

That's it. You can now use Tailwind CSS anywhere in your app. For instance, in your index.html add antialiased text-gray-900 as the body's classes and observe the results.