0PricingLogin▼
Tailwind CSS Academy · Lesson

Installing and Configuring Tailwind

Set up Tailwind CSS via CDN and via npm with the CLI, and see your first styled HTML page come to life.

Two Ways to Add Tailwind

Two ways to add Tailwind: a CDN script tag for quick prototyping, or the npm CLI for production, which builds a tiny optimized CSS file.

<!-- CDN approach (prototyping only) -->
<script src="https://cdn.tailwindcss.com"></script>

Installing Tailwind via npm

For production, install via npm: tailwindcss, postcss, and autoprefixer. Then run npx tailwindcss init -p to create both config files at once.

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

All lessons in this course

  1. Utility-First CSS Explained
  2. Installing and Configuring Tailwind
  3. Your First Tailwind Page
  4. Tailwind vs Traditional CSS
← Back to Tailwind CSS Academy