Установка Tailwind CSS

Добавьте CSS-фреймворк Tailwind CSS в ваш проект.

Beginner10 мин.

Setup Steps

1. Install Tailwind CSS v4 for Vite projects:

npm install -D tailwindcss @tailwindcss/vite

2. Add the plugin to vite.config.ts:

import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [tailwindcss()]
})

3. Add to your CSS file (@/index.css):

@import "tailwindcss";

4. Tailwind CSS v3 setup (alternative):

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

5. tailwind.config.js configuration (v3):

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

6. Add to CSS file (v3):

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

7. Usage examples:

<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
  <h1 class="text-2xl font-bold text-gray-900">Title</h1>
  <p class="text-gray-600">Description text</p>
</div>

8. VS Code extension: Tailwind CSS IntelliSense

Related Guides

Деплой на Vercel

Разверните Next.js или React-проект на Vercel.

Деплой на Netlify

Разверните статический сайт на Netlify.

Установка Bun Runtime

Установите Bun - быструю альтернативу Node.js.

Установка Deno

Установите Deno - безопасную среду выполнения JS/TS.