Using Tailwind With Vite

Published Oct 3, 2021

Table of Contents

Initialize the Project

Initialize the Vite project.

terminal
npm init vite@latest

Install dependencies.

terminal
npm i

Install Tailwind

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

terminal
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.

terminal
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.

tailwind.config.js
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.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Import Styles

Import your styles.

main.js
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.

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! πŸ„β€β™€οΈ

Support

You can subscribe on YouTube, or consider becoming a patron if you want to support my work.

Patreon
Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub