How to use TailwindCSS with Vite? (not react or something just vanilla JS)

Question

I'm a newbie and I'm gonna lose my mind. I watch every tutorial and read every documents. It's just not work. Anyone knows how to mix tailwind(postcss or cli) and vite ?

I want to use vanilla css with vite, and some tailwind at the same time. But it's recommended not to use tailwindcss CDN with vite.

First I'm creating my vanilla js project with vite and than trying to install tailwind and I do every step as they said. Then I prompt npm run dev voila error

Answer 1

Update your vite.config.js file something like this

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
export default defineConfig({
plugins: [react()],
  css: {
   postcss: {
    plugins: [tailwindcss()],
   },
  },
});

Answer 2

continue with @NewBie instruction. but at then end for loading the tailwind you have to do two things:

1. add this to your style.css

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

2. change your tailwind.config.js as follow

    /** @type {import('tailwindcss').Config} */
    export default {
      content: [
        "index.html",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

Answer 3

Installation steps for Vite and React is different.

Hope this link helps.

Answer 4

Run the following commands to use tailwind css with vite + Valinaa js

npm init vite@latest my-vite-project

select Vanilla , Then Enter Select JavaScript

cd my-vite-project

npm install

Install Tailwind CSS and its dependencies using npm:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

it will create postcss.config file

like this >

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

and now you can run your project , use this command to run >

npm run dev