Congratulations!

Congratulations, you've completed the Tailwind course! You've styled a whole website with it, for phones and computers, in light and dark.

Here's what you've learned in the course:

• Tailwind is a CSS framework of small utility classes. Instead of writing rules, you give elements classes, and Tailwind makes the CSS for exactly the classes it finds in your files. @import "tailwindcss"; turns it on, and its base styles, Preflight, remove the browser's own styles.
• Colors from the palette (bg-orange-500, text-stone-800), also semi-transparent ones (bg-black/50), and text: size, weight, line height, alignment, letter spacing and font family.
• The spacing scale, where one step is 4 px: padding, margin, width and height, maximum widths, and values in square brackets when you need one outside the scale.
• Borders, rounded corners, shadows, opacity, and pictures cropped with object-cover.
• Layout with flexbox and grid (flex, justify-between, items-center, gap-6, grid-cols-3) and positioning (relative, absolute, sticky top-0).
• Variants for states, such as hover:, focus:, active:, disabled: and group-hover:, and smooth transitions.
• Responsive design: mobile first, and the breakpoints sm:, md:, lg: and xl:.
• Dark mode with dark:, switched by the class dark on the html element.
• Customizing Tailwind: your own colors and fonts in @theme, and your own classes with @apply and @utility.

Tailwind on your own computer. Browsers don't understand @import "tailwindcss";. On our site, a program turns your style.css into ordinary CSS every time you click Run. If you just open your two files on your own computer, the page will have no styles. There are two ways to fix that.

For quick experiments, the Play CDN. In head, replace the link to style.css with this script, and put the whole content of style.css into a style element with type="text/tailwindcss" (here it's shortened):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
	@import "tailwindcss";
	@custom-variant dark (&:where(.dark, .dark *));

	@theme {
		--color-brand-500: #f97316;
	}
</style>

The script is Tailwind itself, running in the browser: every time the page opens, it finds the classes on the page and makes their CSS. That's handy for trying things out, but Tailwind's documentation says the Play CDN is meant only for development, not for a real website: every visitor would have to download the whole of Tailwind and wait for the CSS to be made.

For a real website, a build tool. A program on your computer makes the finished CSS in advance, just as our site does, and visitors get an ordinary CSS file. For that, you need Node.js, which comes with npm, a program for installing packages (ready-made programs and libraries), and the terminal (the command line). For a page like yours, the simplest tool is the Tailwind CLI (a program for the command line). Open the terminal in the folder with your page and run:

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i style.css -o output.css --watch

The first command installs Tailwind into the folder. The second one reads style.css (-i, the input), looks for classes in the files in the folder and writes the finished CSS into output.css (-o, the output). With --watch, it keeps running and makes the CSS again whenever you save a file. In index.html, link output.css instead of style.css, and open the page in the browser as usual.

Bigger projects, especially ones with JavaScript, often use Vite, a tool that prepares the scripts, styles and pictures of a whole website. In Vite, Tailwind is a plugin. You create a new project like this (Vite asks a few questions: for plain HTML, CSS and JavaScript, choose the framework Vanilla and the variant JavaScript, and when it offers to install and start the project now, answer No, so that you can add Tailwind first):

npm create vite@latest my-shelter
cd my-shelter
npm install tailwindcss @tailwindcss/vite

Then add the plugin to the file vite.config.js (if it isn't in the project's folder, create it):

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

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

At the top of the project's CSS file (in the Vanilla template, src/style.css), write @import "tailwindcss";, and start the project with npm run dev. It shows the address of your page, such as http://localhost:5173/. Tailwind's documentation (tailwindcss.com/docs) describes both ways step by step under Installation, and also how to use Tailwind with frameworks.

Helpers. If you write code in Visual Studio Code, install the extension Tailwind CSS IntelliSense: as you type, it suggests class names, and when you point at a class with the mouse, it shows the CSS the class makes. And prettier-plugin-tailwindcss is a plugin for Prettier, a program that tidies up code: it sorts the classes in every class attribute into the same order, so that they're easier to read.

Save your page. As at the end of the CSS course, create a folder on your computer and save the code of index.html into it as index.html and the code of style.css as style.css. Then use one of the two ways above to see it with its styles. Watch out for the pictures: an address like /learn/tailwind/cat-orange.svg only works on our website. Use the full address, https://www.startcoder.com/learn/tailwind/cat-orange.svg, or save the pictures into the same folder and write just their file names.

What next? When you need a class you haven't learned, look it up in Tailwind's documentation: its search also finds classes by the CSS property you know, such as justify-content. And the next step on your way to making websites is JavaScript. HTML gives a page its content, CSS and Tailwind its look, and JavaScript brings it to life: it can respond to clicks, like the little script of your dark mode button, change the content of the page or work with the data from a form. Continue with the JavaScript course.