This guide walks you through integrating React 19, Tailwind CSS v4, and Shadcn/UI without TypeScript.

react19_taiwindcssv4_shadcnui.md

React 19 + Tailwind CSS v4 + Shadcn/UI Setup (JavaScript)

This guide walks you through integrating React 19, Tailwind CSS v4, and Shadcn/UI without TypeScript.

1. Create a Vite Project

npm create vite@latest <app-name> -- --template=react-js
cd <app-name>
npm install

2. Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

3. Import Tailwind CSS in src/index.css

@import "tailwindcss";

4. Create jsconfig.json in project root

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

5. Update vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": new URL("./src", import.meta.url).pathname,
    },
  },
});

6. Run the shadcn init command to setup your project:

npx shadcn@latest init

Found this setup useful? ⭐ the Gist to keep it handy and help others discover it!