DEV Community

"Rocky" Hiroki Ueno
"Rocky" Hiroki Ueno

Posted on

6

Create React project with Vite and set up Tailwind, shadcn/ui

Using Tailwind and shadcn/ui is common in React.
This is how to start a new React project with Tailwind and shadcn/ui.

Create a new project with Vite

Run this command to create a project

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

Follow the instructions on console and set up your project such as your project name, framework (React), Javascript or Typescript (Typescript for now)

Install Tailwind

Add Tailwind and its configuration files to your project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Delete all existing codes and add bottom codes in src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Edit content as below in tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  /** ... **/
}
Enter fullscreen mode Exit fullscreen mode

Configure paths

Edit tsconfig.json and tsconfig.app.json files to resolve paths
tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
Enter fullscreen mode Exit fullscreen mode

Now we also need to update vite.config.ts and install a package before the file

npm i -D @types/node
Enter fullscreen mode Exit fullscreen mode

Then update vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

Set up shadcn/ui

Run this command to set up

npx shadcn@latest init
Enter fullscreen mode Exit fullscreen mode

Follow the instructions on console and configure your project
My usual configuration is as below:

  • Style > Default
  • Base color > Neutral
  • CSS variables > No

Now set up is done and you can add components
To start, run the command to add button

npx shadcn@latest add button
Enter fullscreen mode Exit fullscreen mode

Then you can use Tailwind and add button component to your project like below

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="bg-red-400">
      <Button>Click me</Button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay