πŸŒ€ Tailwind CSS Setup

Tailwind is a utility-first CSS framework for rapidly building custom UIs. Let’s get started with the easiest setup: CDN.

πŸš€ CDN Quick Start

You can include Tailwind in your HTML using a CDN β€” no npm, no build tools.

πŸ’‘ Tip: For full customization and advanced use, install via npm and configure with tailwind.config.js

πŸ“¦ NPM Setup (for future projects)

  1. Install Tailwind:
  2. npm install -D tailwindcss postcss autoprefixer
  3. Initialize config:
  4. npx tailwindcss init -p
  5. Edit tailwind.config.js to scan your HTML files.
  6. Create a CSS file with @tailwind base; etc., then run:
  7. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch