TLDR; ReactJS project initialization with Tailwind CSS and Shadcn using Vite

TLDR; ReactJS project initialization with Tailwind CSS and Shadcn using Vite

# webdev# programming# javascript# react
TLDR; ReactJS project initialization with Tailwind CSS and Shadcn using ViteChaudhry Talha šŸ‡µšŸ‡ø

TLDR; guide of initializing a ReactJS project using Vite and installing TailwindCSS and Shadcn. You...

TLDR; guide of initializing a ReactJS project using Vite and installing TailwindCSS and Shadcn. You can choose to use pure CSS as well.

Run this command to create a new project:

npm create vite@latest my-app -- --template react-ts
Enter fullscreen mode Exit fullscreen mode

In the above the dependencies are automatically installed. To manually install dependencies and running the app:

cd my-app
yarn install
yarn dev
Enter fullscreen mode Exit fullscreen mode

If you open localhost:5137 the URL given in your terminal you'll see something similar to this:

Tailwind Setup

Install the required package:

yarn add -D tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

shadcn absolutely requires path aliases (@/components/...) to work, so we'll need to install this package as well:

yarn add -D @types/node
Enter fullscreen mode Exit fullscreen mode

Open vite.config.ts file and in it add tailwindcss() in plugins and the whole resolve: {ā€¦ object as shown below:

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

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

If you're seeing errors in import statements see the pnp fix in at the end of this post

New open tsconfig.app.json and ensure it matches the below code i.e. added "compilerOptions": {ā€¦Ā :

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

Open src/index.css and remove everything in it and add this on top of that file:

@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

shadcn/ui Setup

From you app root directory in terminal, run:

npx shadcn@latest init
Enter fullscreen mode Exit fullscreen mode

Use Radix if prompted to select a component library. Which preset would you like to use I selected Vega and you can select any.

Let's install the button UI from shadcn to test if we got it installed successfully:

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

Test everything

To test if everything is working okay let's replace the <button with the button from shadcn in App.tsx:

import { Button } from "./components/ui/button";

//... Other code        

<Button
          variant={"destructive"}
          className="bg-black"
          onClick={() => setCount((count) => count + 1)}
        >
          count is {count}
        </Button>
Enter fullscreen mode Exit fullscreen mode

The red color is coming from Shadcn variant and the background black is added via tailwind.

pnp error from yarn

When using yarn to install packages etc, the latest version install and manages packages using Yarn Plug'n'Play (there will be a pnp file created in your codebase instead of node_modules folder) if you use yarn. To use the traditional node_modules you can do:

yarn set version stable
yarn config set nodeLinker node-modules
rm -rf .pnp.cjs .pnp.loader.mjs node_modules
yarn install
Enter fullscreen mode Exit fullscreen mode

After this restart your IDE if it is still not resolving the imports.