Sure! Here is a complete README.md file content based on your instructions:
# Tailwind CSS with Vite and Custom Themes Setup
## Step 1: Create your project
Start by creating a new Vite project. Use Create Vite for easy setup:
```bash
npm create vite@latest my-project
cd my-projectInstall tailwindcss and the Vite plugin @tailwindcss/vite via npm:
npm install tailwindcss @tailwindcss/viteOpen vite.config.ts and add the Tailwind CSS plugin:
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})In your main CSS file (e.g. index.css), import Tailwind CSS styles:
@import "tailwindcss";Run your development server:
npm run devIn your CSS, create a base layer defining your theme variables:
@layer base {
/* Default (light) theme */
:root {
--background: #ffffff;
--foreground: #020817;
--primary: #1e40af;
/* Add more variables here */
}
/* Dark theme */
[data-theme="dark"] {
--background: #020817;
--foreground: #f8fafc;
--primary: #ffffff;
/* Add more variables here */
}
/* Green theme */
[data-theme="green"] {
--background: #a9f2b6;
--foreground: #2b382a;
--primary: #2b382a;
/* Add more variables here */
}
}Define a theme layer mapping Tailwind variables to your CSS custom properties:
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
/* Add more mappings here */
}This allows you to use Tailwind utilities like bg-background or text-primary which respond to your active theme.
- Create Vite project
- Install Tailwind CSS and its Vite plugin
- Configure Tailwind plugin in
vite.config.ts - Import Tailwind CSS in your CSS file
- Run your dev server
- Define CSS variables for themes in a base layer
- Map those variables for Tailwind usage
- Use
data-themeattribute on<html>to toggle themes dynamically
Official Tailwind CSS + Vite installation guide
Would you like me to generate this file for you as an actual .md file for download?