Tailwind CSSBeginner

Tailwind CSS with Vite

Vite প্রজেক্টে Tailwind CSS কীভাবে setup করবেন — step by step বাংলা গাইড।

10টি অংশবাংলা ভাষায়

Vite হলো আধুনিক frontend build tool। Tailwind CSS v4-এ Vite-এর সাথে setup খুবই সহজ।

Step 1: Vite Project তৈরি

Terminalbash

bash

npm create vite@latest my-project -- --template react
cd my-project
npm install

Step 2: Tailwind Install

Terminalbash

bash

npm install tailwindcss @tailwindcss/vite

Step 3: Vite Config Update

vite.config.tstypescript

typescript

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

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

Step 4: CSS Import

src/index.csscss

css

@import "tailwindcss";

ব্যস, তৈরি!

এখন npm run dev চালান। Tailwind CSS কাজ করতে শুরু করবে!

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।

Tailwind CSSBeginner

Tailwind CSS with Vite

Vite প্রজেক্টে Tailwind CSS কীভাবে setup করবেন — step by step বাংলা গাইড।

10টি অংশবাংলা ভাষায়

Vite হলো আধুনিক frontend build tool। Tailwind CSS v4-এ Vite-এর সাথে setup খুবই সহজ।

Step 1: Vite Project তৈরি

Terminalbash

bash

npm create vite@latest my-project -- --template react
cd my-project
npm install

Step 2: Tailwind Install

Terminalbash

bash

npm install tailwindcss @tailwindcss/vite

Step 3: Vite Config Update

vite.config.tstypescript

typescript

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

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

Step 4: CSS Import

src/index.csscss

css

@import "tailwindcss";

ব্যস, তৈরি!

এখন npm run dev চালান। Tailwind CSS কাজ করতে শুরু করবে!

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।