Tailwind CSS Get Started

There are two common ways to start using Tailwind CSS: a quick CDN script for learning, and an npm install for real projects.

Option 1: The Play CDN (for Learning)

Add one <script> tag to the <head> of any HTML page. The script reads the classes in your page and creates the CSS for them in the browser.

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

A complete page looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Tailwind Page</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">

<h1 class="text-3xl font-bold text-cyan-600">It works!</h1>
<p class="mt-3 text-gray-600">Tailwind is loaded from the CDN.</p>

</body>
</html>

This is what every example in this tutorial uses, so they run in the Try it editor.

Option 2: Install with npm and Vite

For real websites, Tailwind runs on your computer and creates a small CSS file with only the classes you use. You need Node.js installed.

Step 1: Create a project

npm create vite@latest my-shop
cd my-shop
npm install

Step 2: Install Tailwind

npm install tailwindcss @tailwindcss/vite

Step 3: Add the plugin to vite.config.js

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

Step 4: Import Tailwind in your CSS file

@import "tailwindcss";

Step 5: Start the dev server

npm run dev

Now you can use Tailwind classes in your HTML, and the page updates every time you save.

Adding Your Own Colours

Tailwind lets you add your own theme values with @theme. With the Play CDN, put it inside a <style type="text/tailwindcss"> tag. Each --color-... variable becomes a new colour class.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --color-brand: #0f766e;
  --color-brand-light: #ccfbf1;
}
</style>
</head>
<body class="p-8">

<div class="bg-brand-light text-brand p-6 rounded-lg font-semibold">
  Ali Electronics uses its own brand colours.
</div>

</body>
</html>

The variable --color-brand created the classes bg-brand, text-brand, border-brand and more.

Which Option to Choose?

Editor Tip

Install the Tailwind CSS IntelliSense extension in VS Code. It suggests class names while you type and shows the CSS each class adds when you hover over it.

Exercise