Setting Up React 19 with Tailwind CSS v4 & ShadCN UI ( Yarn )

YEP! Thumbnail is AI Generated ;)

In this guide, we’ll walk through creating a new React 19 project with Vite, integrating Tailwind CSS (v4), and preparing the project for ShadCN UI. We’ll use Yarn as our package manager and TypeScript as our language of choice.

Prerequisites

• Node.js
• Yarn

1. Create a New Vite React Project

Start by creating a new Vite project using Yarn:

yarn create vite

When prompted, provide the following options:

• Project Name: react-19-tailwind-v4-shadcn
• Framework: React
• Variant: TypeScript

After the project is created, navigate into your new project directory:

cd react-19-tailwind-v4-shadcn

Install the project dependencies and start the development server:

yarn
yarn dev

2. Install Tailwind CSS and Vite Plugin

Add Tailwind CSS along with its Vite plugin:

yarn add tailwindcss @tailwindcss/vite

3. Configure Vite for Tailwind CSS

Open your vite.config.ts file and configure it to use Tailwind CSS. For example:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

4. Set Up Tailwind CSS in Your Stylesheet

In your main CSS file (e.g., src/index.css or src/tailwind.css), add the following line at the top to import Tailwind CSS:

@import "tailwindcss";

5. Configure TypeScript

Update tsconfig.json

Ensure your tsconfig.json includes references to the app and node configuration files, as well as base URL and path aliases:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Update tsconfig.app.json

Set up path aliases in tsconfig.app.json as well:

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

6. Install Node Type Definitions

Add the Node.js type definitions as a development dependency:

yarn add -D @types/node

7. Update Vite Configuration for Resolve Aliases

Enhance your vite.config.ts by including the React plugin and setting up module resolution with path aliases:

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Finally run

npx shadcn@canary init

You now have a clean, organized setup for a React 19 project with Tailwind CSS v4 and ShadCN UI. This foundation will help you build modern and scalable web applications with a robust UI component library.

Happy coding!

Find Me Here 👉https://www.linkedin.com/in/itssourav/