Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
# 1. Install Tailwind CSS, PostCSS, and Autoprefixer npm install -D tailwindcss postcss autoprefixer # 2. Generate tailwind.config.js and postcss.config.js npx tailwindcss init -p # ── tailwind.config.js (generated) ─────────────────── /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}", ], theme: { extend: {}, }, plugins: [], } # ── postcss.config.js (generated) ──────────────────── module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } /* ── src/index.css ────────────────────────────────── */ @tailwind base; @tailwind components; @tailwind utilities; # 3. Start the build watcher (Vite example) npm run dev # Or compile once with the Tailwind CLI: npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch
Result
Open