Lesson 4 +10 XP

CLI, PostCSS, and Play CDN

Other Ways to Install Tailwind

Vite is one option - but you can also use the Tailwind CLI, PostCSS, or the Play CDN for quick prototyping.

The CLI is a standalone build tool with no framework required:

npm install tailwindcss @tailwindcss/cli

Create your input CSS with @import "tailwindcss";, then build:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Link the compiled CSS in your HTML:

<link href="./output.css" rel="stylesheet">

A standalone executable (no Node.js needed) is also available from GitHub releases.

Recommended for frameworks like Next.js and Angular:

npm install tailwindcss @tailwindcss/postcss postcss

Add it to postcss.config.mjs:

export default {
  plugins: {
    "@tailwindcss/postcss": {}
  }
};

Then @import "tailwindcss"; in your CSS and run your build.

For quick experiments with no build step, add a single script tag:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

You can even use <style type="text/tailwindcss"> blocks with full Tailwind features:

<style type="text/tailwindcss">
  @theme {
    --color-clifford: #da373d;
  }
</style>

Warning: the Play CDN runs an in-browser compiler - use it for development only, not for production.