Logo

dev-resources.site

for different kinds of informations.

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

Published at
11/28/2024
Categories
react
tailwindcss
shadcn
vite
Author
rockyueno0223
Categories
4 categories in total
react
open
tailwindcss
open
shadcn
open
vite
open
Author
13 person written this
rockyueno0223
open
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
shadcn Article's
30 articles in total
Favicon
Made FOSS for simplifying NextJS dev with OAuth And Postgres
Favicon
.gitkeep file in Shadcn/ui source code
Favicon
Introducing the Zod Schema Designer: A Visual Tool for Creating and Editing Zod Schemas
Favicon
Handling Local Storage for Toaster Notifications
Favicon
I created a visually pleasing HTML color viewer
Favicon
AISEKA Color Tool Website
Favicon
Color Palette is served with ShadCn Theme Editor
Favicon
Create React project with Vite and set up Tailwind, shadcn/ui
Favicon
Why Developers Love the Shadcn Sidebar Component
Favicon
A comparison of metadata configurations between Lobechat and Shadcn/ui
Favicon
Forms in seconds with ShardCn forms
Favicon
What is the Difference Between Radix UI and ShadCN?
Favicon
How Shadcn CLI uses error constants to improve code readability
Favicon
Exploring the ShadCN UI Library: A Comprehensive Guide
Favicon
10 Essential Shadcn Components Every Developer Should Know About
Favicon
The beginning of my open source journey
Favicon
Install ShadCN and Tailwind in Vite React Project
Favicon
How to add shadcn to existing project
Favicon
How to Use Shadcn UI with a React Project
Favicon
How to Install Shadcn with Next.js 14: A Step-by-Step Guide
Favicon
Shadcn Date Picker with custom implementation
Favicon
How to Fix Shadcn UI Adding Wrong Folder for Components
Favicon
Material UI vs Shadcn
Favicon
Building UIs with Franken UI, a Shadcn alternative
Favicon
Implement ShadCn form with Validation
Favicon
Top 5 Coolest shadcn/ui Extensions
Favicon
Shadcn UI: Must-Have Tools & Resources
Favicon
shadcn-ui/ui codebase analysis: examples route explained.
Favicon
Two ways I discovered to pass dynamic parameters in (arrow and non-arrow) function.
Favicon
Creating a User Nav bar in Next.js 14 using Shadcn UI and Tailwindย CSS

Featured ones: