Using Tailwind With Vite

Table of Contents

• Initialize the Project
• Install Tailwind
• Initialize the Tailwind Config
• Add @tailwind Directives
• Import Styles
• Extensions
• Conclusion

Initialize the Project

Initialize the Vite project.

npm init vite@latest

Install dependencies.

npm i

Install Tailwind

Vite has PostCSS and Autoprefixer built-in, so there’s no need to install it.

npm i -D tailwindcss@latest

Initialize the Tailwind Config

Depending on your project and folder structure be sure to include what files to purge to optimize for production.

npx tailwindcss init -p

I like to enable JIT (Just-in-Time Mode) inside the Tailwind config that enables lightning fast build times and having every variant enabled out of the box. If you want to learn more about it watch Just-In-Time: The Next Generation of Tailwind CSS.

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Add @tailwind Directives

Add this to your styles.

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

Import Styles

Import your styles.

import './tailwind.css'

Extensions

If you’re using Visual Studio Code I highly recommend to get these extensions, or look if they exist for your editor.

• Tailwind CSS IntelliSense adds autocomplete, syntax highlighting, and linting
• Headwind enforces consistent ordering of classes and sorts them for you

Conclusion

Setting up Tailwind with Vite is simple. Hope you found it useful and I wish you good luck in your project.

Thanks for reading! 🏄‍♀️