DEV Community: Nabin Kandel

🚀 React + Vite + Tailwind CSS + Shadcn UI Setup (vanillaJS)

Nabin Kandel — Sun, 10 May 2026 01:39:57 +0000

A complete step-by-step guide to quickly set up **React + Vite + Tailwind CSS + Shadcn UI* with clean @/... alias imports — no TypeScript required!*

⏱️ Time to complete: ~10 minutes

🎯 Result: Production-ready React app with beautiful, accessible components

🧩 Step 1: Create a Vite + React Project

Scaffold your new project with Vite:

npm create vite@latest my-app
cd my-app

When prompted, select:
Option | Choice
Framework | React
Variant | JavaScript

✅ Vite will generate a lean, fast React starter with HMR (Hot Module Replacement) out of the box.

🌀 Step 2: Install Dependencies

Install core packages and Tailwind's official Vite plugin:

npm install
npm install tailwindcss @tailwindcss/vite

Package	Purpose
`tailwindcss`	Utility-first CSS framework
`@tailwindcss/vite`	First-party Vite plugin for Tailwind (no PostCSS config needed!)

🎨 Step 3: Configure `vite.config.js`

Replace the entire contents of vite.config.js with:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler"]], // ✅ Optional: React Compiler for perf
      },
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"), // ✅ Enable @/ imports
    },
  },
});

🔍 Why This Matters:

@tailwindcss/vite → Compiles Tailwind at build time (faster than PostCSS!)
@ alias → Import like import Button from "@/components/ui/button" instead of ../../../components/ui/button 🧹

⚙️ Step 4: Create `jsconfig.json` for Editor Support

At your project root, create jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

💡 Benefits:

✅ VS Code autocomplete for @/ imports
✅ ESLint/Prettier understand your alias paths
✅ No more "Cannot find module" warnings 👻

🪄 Step 5: Import Tailwind in Your CSS

Open or create src/index.css and add:

@import "tailwindcss";

🎉 That's it! With @tailwindcss/vite, you don't need @tailwind base/components/utilities — the plugin handles it automatically.

(Optional) Clean up default styles:

Delete or empty src/App.css to avoid conflicting styles.

🌈 Step 6: Initialize Shadcn UI

Run the Shadcn CLI to set up your component library:

npx shadcn@latest init

Follow the prompts:
| Question | Recommended Choice |
|----------|-------------------|
| Style | New York or Default |
| Base color | Slate (neutral & accessible) |
| CSS variables | Yes (for theming) |

Then add your first components:

npx shadcn@latest add button card input

✅ Components land in src/components/ui/ — fully customizable, accessible, and Tailwind-powered.

💻 Step 7: Test Your Setup

Open src/App.jsx and replace with:

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-center">🎉 Setup Successful!</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <p className="text-center text-gray-600">
            You're now running React + Vite + Tailwind + Shadcn UI.
          </p>
          <Button className="w-full">Click Me</Button>
          <Button variant="outline" className="w-full">
            Secondary Action
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}

Then start the dev server:

npm run dev

🔗 Visit http://localhost:5173 — you should see a beautifully styled card with Shadcn buttons!

✅ Final Project Structure

my-app/
├── public/
├── src/
│   ├── components/
│   │   └── ui/          # 🎨 Shadcn components (button, card, input...)
│   ├── App.jsx          # 🏠 Main app component
│   ├── index.css        # 🎨 Tailwind import
│   └── main.jsx         # ⚡ React entry point
├── index.html
├── vite.config.js       # ⚙️ Vite + Tailwind + alias config
├── jsconfig.json        # 🧠 Editor alias support
├── tailwind.config.js   # 🎨 Auto-generated by Shadcn (optional to tweak)
├── package.json
└── ...

🧭 Pro Tip: Keep src/components/ui/ for Shadcn primitives, and create src/components/ for your custom composables (e.g., UserProfile.jsx, NavBar.jsx).

🛠️ Troubleshooting Quick Fixes

Issue	Solution
❌ `@/` imports not working	Restart VS Code; ensure `jsconfig.json` is at root
❌ Tailwind classes not applying	Verify `@import "tailwindcss"` is in `index.css`
❌ Shadcn components look unstyled	Check that `index.css` is imported in `main.jsx`
❌ Vite server won't start	Run `npm run dev -- --force` to clear HMR cache
❌ Button has no hover effect	Ensure `tailwind.config.js` includes `content` paths (Shadcn auto-generates this)

🧪 Bonus: Add a Dark Mode Toggle (Optional)

Shadcn supports theming out of the box! Add this to src/App.jsx:

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";

export default function App() {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", dark);
  }, [dark]);

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background text-foreground transition-colors">
      <Button onClick={() => setDark(!dark)} variant="outline">
        {dark ? "☀️ Light Mode" : "🌙 Dark Mode"}
      </Button>
    </div>
  );
}

🌗 Requires darkMode: "class" in tailwind.config.js (Shadcn sets this by default).

🔗 Helpful Resources

🎯 Key Takeaways

✅ Vite = Blazing-fast dev server & build
✅ @tailwindcss/vite = Simpler Tailwind setup (no PostCSS!)
✅ @/ aliases = Cleaner, scalable imports
✅ Shadcn UI = Production-ready, accessible components — you own the code
✅ JavaScript-first = No TypeScript overhead for quick prototyping

🙌 If this guide helped you ship faster, give it a ❤️, share it with your team, or drop a comment with what you're building!

⚡️ Complete Setup Guide: Expo + NativeWind (2026 Edition)

Nabin Kandel — Sun, 10 May 2026 01:30:33 +0000

Build beautiful, responsive React Native apps with Tailwind CSS — the easy way.

💡 What is NativeWind?

NativeWind lets you use Tailwind CSS classes directly in React Native components. Write className="flex-1 bg-white" instead of verbose stylesheets. 🎨

📋 Prerequisites

Before we begin, make sure you have:

Tool	Install Command / Link
Node.js (LTS)	nodejs.org
npm or yarn	Comes with Node.js
Expo CLI	`npm install -g expo-cli`
Xcode (for iOS)	App Store ⚠️ macOS only
Android Studio (for Android)	developer.android.com

🍎 iOS Developers: Xcode is ~12GB and required to run the iOS Simulator. Install it early — it takes time!

🤖 Android Developers: Enable a virtual device via Android Studio's Device Manager.

🧱 Step 1: Create and Initialize Project

npx create-expo-app@latest my-app
cd my-app

✅ Test that everything works:

npm run ios
# or
npm run android

Key	Action
`i`	Open iOS Simulator
`a`	Open Android Emulator
`r`	Reload the app
`d`	Open developer menu

🔁 Step 2: Reset the Project (Optional Cleanup)

Expo's template includes demo files. Let's start fresh:

npm run reset-project

When prompted:

Do you want to move existing files to /app-example instead of deleting them? (Y/n):

👉 Press n to delete and get a clean Expo Router structure.

🌿 Step 3: Install NativeWind & Dependencies

💡 Keep your Metro bundler running in one terminal. Open a new terminal for installations.

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

Package	Purpose
`nativewind`	Tailwind for React Native
`tailwindcss`	Core Tailwind engine
`react-native-reanimated`	Smooth animations
`react-native-safe-area-context`	Handle notches & status bars

🌀 Step 4: Initialize Tailwind

npx tailwindcss init

This creates tailwind.config.js at your project root.

⚙️ Step 5: Update `tailwind.config.js`

Replace the entire file with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./screens/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

🔍 The content array tells Tailwind which files to scan for class names.

🎨 Step 6: Create `app/globals.css`

Inside your app/ folder, create globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

This imports Tailwind's utility classes into your app.

🧠 Step 7: Configure Babel — `babel.config.js`

At your project root, update babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

✨ This enables NativeWind's CSS-in-JS transformation at build time.

🧩 Step 8: Customize Metro Config

Run the Expo helper:

npx expo customize metro.config.js

Then update metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./app/globals.css" });

🔄 This injects NativeWind's CSS processor into Expo's bundler.

📘 Step 9: Add TypeScript Support — `nativewind-env.d.ts`

At your project root, create:

nativewind-env.d.ts

Add this single line:

/// <reference types="nativewind/types" />

✅ Now your editor will recognize className props with autocomplete!

📂 Step 10: Update `app/_layout.tsx`

Import your global styles:

import { Stack } from "expo-router";
import "./globals.css";

export default function RootLayout() {
  return <Stack />;
}

🧭 expo-router uses file-based routing — _layout.tsx wraps all screens.

🧱 Step 11: Example Screen — `app/index.tsx`

Let's test NativeWind with a simple screen:

import { View, Text } from "react-native";

export default function Index() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-red-500 text-2xl font-bold">
        Hello from NativeWind 🎉
      </Text>
    </View>
  );
}

✅ If you see red, bold, centered text — it's working!

🚀 Step 12: Restart with Cache Clear

Final step — clear Metro's cache to apply all config changes:

npx expo start -c

When prompted:

? Clear Metro bundler cache? (y/N)

👉 Press y

🎯 You're All Set!

✅ Expo + Router

✅ NativeWind + Tailwind CSS

✅ Hot reloading with class names

✅ TypeScript support

✅ iOS & Android ready

🛠️ Troubleshooting Tips

Issue	Solution
❌ `className` not working	Restart with `-c`, check `babel.config.js`
❌ iOS simulator won't launch	Ensure Xcode is installed + command line tools: `xcode-select --install`
❌ Styles not updating	Verify `globals.css` is imported in `_layout.tsx`
❌ TypeScript errors on `className`	Confirm `nativewind-env.d.ts` exists at root
❌ Metro bundler stuck	Delete `node_modules/.cache` and restart

💡 Pro Tip: Add this to your package.json for faster dev:

"scripts": {
  "ios:clean": "npx expo start -c --ios",
  "android:clean": "npx expo start -c --android"
}

🧪 Bonus: Quick Test Component

Try this in a new file to see NativeWind in action:

// app/components/TestCard.tsx
import { View, Text } from "react-native";

export default function TestCard() {
  return (
    <View className="m-4 p-6 bg-blue-100 rounded-2xl shadow-lg">
      <Text className="text-blue-800 text-lg font-semibold mb-2">
        🚀 NativeWind Works!
      </Text>
      <Text className="text-gray-600">
        Style with Tailwind, no StyleSheet needed.
      </Text>
    </View>
  );
}

Then import it in index.tsx — instant beautiful UI! 🎨

🔗 Helpful Resources

🙌 If this guide saved you time, give it a ❤️, share it with a fellow dev, or drop a comment with what you're building next!

Tags: #ReactNative #Expo #NativeWind #TailwindCSS #MobileDev #WebDevelopment #Beginners #Tutorial

Understanding JavaScript Classes Objects and the ‘new’ Keyword: A Beginner’s Guide

Nabin Kandel — Sun, 10 May 2026 01:17:38 +0000

JavaScript Classes & the `new` Keyword: A Beginner's Guide to OOP 🎯

If you're just starting with JavaScript and Object-Oriented Programming (OOP), the class and new keywords might seem confusing. Let me break it down in the simplest way possible.

📐 What is a Class?

Think of a class as a blueprint or a recipe. It doesn't contain actual data — it just describes what kind of data an object should have.

class Student {
  name;
  age;
  gender;
}

This Student class is like saying: "Every student should have a name, age, and gender."

But we haven't created any actual students yet—just the plan.

🛠️ Creating Objects from a Class

To create actual students (objects) from our blueprint, we use the new keyword:

const ram = new Student();
ram.name = "Ram";
ram.age = 10;
ram.gender = "Male";

const sita = new Student();
sita.name = "Sita";
sita.age = 9;
sita.gender = "Female";

const hari = new Student();
hari.name = "Hari";
hari.age = 11;
hari.gender = "Male";

✅ Now we have three real student objects, each with their own data.

🔍 Using the Data

Once created, you can access each student's information:

console.log(ram.name);    // Output: Ram
console.log(sita.age);    // Output: 9
console.log(hari.gender); // Output: Male

❓ Why Do We Need the `new` Keyword?

This is where most beginners get confused.

Why can't we just write const ram = Student()?

Without `new` ❌

const ram = Student();  // ❌ Error! This won't work

JavaScript doesn't understand that you want to create an object. It thinks you're trying to call a regular function.

With `new` ✅

const ram = new Student();  // ✅ This works!

The new keyword tells JavaScript:

"I want to create a brand new object based on this class."

⚙️ What Does `new` Actually Do?

When you use new Student(), JavaScript performs three important steps:

📦 Creates an empty object
🔗 Links it to the Student class (so it knows what properties/methods it should have)
✅ Returns the new object (and stores it in your variable)

🍪 A Real-World Analogy

Concept	Real-World Equivalent
Class	Cookie cutter 🍪
`new`	Pressing the cutter into dough
Object	The actual cookie you can eat

You can use the same cookie cutter (class) to make many cookies (objects), but each cookie is separate and can have different decorations (data).

📋 Quick Reference

Concept	What It Is	Example
Class	Blueprint/Template	`class Student { }`
Object	Actual instance with data	`const ram = new Student()`
`new`	Keyword to create objects	`new Student()`

🔑 Key Takeaways

✅ One class can create many objects
✅ Each object has its own independent data
✅ The new keyword is required to create objects from a class

💻 Complete Example

Here's everything together:

// 1️⃣ Define the blueprint
class Student {
  name;
  age;
  gender;
}

// 2️⃣ Create objects using 'new'
const ram = new Student();
ram.name = "Ram";
ram.age = 10;
ram.gender = "Male";

const sita = new Student();
sita.name = "Sita";
sita.age = 9;
sita.gender = "Female";

// 3️⃣ Use the data
console.log(ram.name);   // Ram
console.log(sita.age);   // 9

// 4️⃣ Each object is independent
ram.age = 11;            // Only changes ram's age
console.log(ram.age);    // 11
console.log(sita.age);   // Still 9 👍

Tags: #JavaScript #WebDevelopment #Programming #OOP #Beginners #LearnToCode

DEV Community: Nabin Kandel

🚀 React + Vite + Tailwind CSS + Shadcn UI Setup (vanillaJS)

🧩 Step 1: Create a Vite + React Project

🌀 Step 2: Install Dependencies

🎨 Step 3: Configure vite.config.js

🔍 Why This Matters:

⚙️ Step 4: Create jsconfig.json for Editor Support

💡 Benefits:

🪄 Step 5: Import Tailwind in Your CSS

🌈 Step 6: Initialize Shadcn UI

💻 Step 7: Test Your Setup

✅ Final Project Structure

🛠️ Troubleshooting Quick Fixes

🧪 Bonus: Add a Dark Mode Toggle (Optional)

🔗 Helpful Resources

🎯 Key Takeaways

⚡️ Complete Setup Guide: Expo + NativeWind (2026 Edition)

📋 Prerequisites

🧱 Step 1: Create and Initialize Project

🔁 Step 2: Reset the Project (Optional Cleanup)

🌿 Step 3: Install NativeWind & Dependencies

🌀 Step 4: Initialize Tailwind

⚙️ Step 5: Update tailwind.config.js

🎨 Step 6: Create app/globals.css

🧠 Step 7: Configure Babel — babel.config.js

🧩 Step 8: Customize Metro Config

📘 Step 9: Add TypeScript Support — nativewind-env.d.ts

📂 Step 10: Update app/_layout.tsx

🧱 Step 11: Example Screen — app/index.tsx

🚀 Step 12: Restart with Cache Clear

🎯 You're All Set!

🛠️ Troubleshooting Tips

🧪 Bonus: Quick Test Component

🔗 Helpful Resources

Understanding JavaScript Classes Objects and the ‘new’ Keyword: A Beginner’s Guide

JavaScript Classes & the new Keyword: A Beginner's Guide to OOP 🎯

📐 What is a Class?

🛠️ Creating Objects from a Class

🔍 Using the Data

❓ Why Do We Need the new Keyword?

Without new ❌

With new ✅

⚙️ What Does new Actually Do?

🍪 A Real-World Analogy

📋 Quick Reference

🔑 Key Takeaways

💻 Complete Example

🎨 Step 3: Configure `vite.config.js`

⚙️ Step 4: Create `jsconfig.json` for Editor Support

⚙️ Step 5: Update `tailwind.config.js`

🎨 Step 6: Create `app/globals.css`

🧠 Step 7: Configure Babel — `babel.config.js`

📘 Step 9: Add TypeScript Support — `nativewind-env.d.ts`

📂 Step 10: Update `app/_layout.tsx`

🧱 Step 11: Example Screen — `app/index.tsx`

JavaScript Classes & the `new` Keyword: A Beginner's Guide to OOP 🎯

❓ Why Do We Need the `new` Keyword?

Without `new` ❌

With `new` ✅

⚙️ What Does `new` Actually Do?