Kevin Powell - Community•4w ago

Can someone help me integrate tailwind in my react vite project ?

I followed the docs from tailwind but the utility classes don't show up at all

8 Replies

glutonium•4w ago

try following this thread https://discord.com/channels/436251713830125568/1260157187041525781

i_lost_to_loba_kreygasmOP•4w ago

I need it inside a react project not vanilla html project 😦

glutonium•4w ago

the process shouldn't be diff i believe u just install tailwind

MarkBoots•4w ago

im not familiar with that stack, but to get some more help, it would be useful to show your structure and config

glutonium•4w ago

configure it and that should be it run this

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

it should create a tailwind.config.js file paste the following in it

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

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

in the "content", change the target files if needed according to your file structure put the following in your index.css file

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

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

it might give warning but just avoid

npm run dev

npm run dev

and then try setting tailwind classes when u first start typing a class, u might not get any autocomplete suggestions but just type a class and then hit space and the when u start typing it should start giving u suggestions make sure u have the extension installed for that first

glutonium•4w ago

-# ~ sourced from the official doc

Install Tailwind CSS with Vite - Tailwind CSS

Setting up Tailwind CSS in a Vite project.

i_lost_to_loba_kreygasmOP•4w ago

i got it working , vite react had different approach thank you for sticking with me 🙂

glutonium•4w ago

welcome

Gaming

Programming

Can someone help me integrate tailwind in my react vite project ?