Guide · Open source
How to use Tailwind CSS: install, utility classes and tips
Updated · written with AI from the project's own documentation and checked against our catalogue data
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of writing separate stylesheets for each component, you apply small, single-purpose classes directly in your HTML or templates. This guide explains the approach, who it suits, how to get the source, and where it fits compared with other tools, so you can decide whether to use it.
Tailwind CSStailwindlabs/tailwindcss · ★ 98.3k · MIT Install options & downloads Quick start
- 1Understand the utility-first model. Learn that Tailwind uses small single-purpose classes applied directly in markup.
- 2Get the source. Clone the official repository from GitHub using the command in the README.
- 3Read the documentation. Open tailwindcss.com for the full setup and class reference.
- 4Set up your project. Follow the documentation to install the package for your build tool.
- 5Apply classes to elements. Add utility classes for layout, spacing, color and typography in your HTML or templates.
- 6Make layouts responsive. Use responsive utilities to adjust styling across screen sizes.
- 7Get help when stuck. Ask questions in the project's GitHub Discussions.
What is Tailwind CSS and how does utility-first work?
Tailwind CSS is built around small, single-purpose utility classes. You combine these classes directly in your markup to style elements for layout, spacing, color, and typography.
The README describes the project as a way to rapidly build custom user interfaces. It is a framework for building your own design, not a set of ready-made components.
- Each class does one job, such as setting layout, spacing, color or text style.
- Styling lives in the same place as your markup or templates.
- You avoid writing large custom stylesheets for each component.
Get the Tailwind CSS source
The README's install instruction is to clone the repository from GitHub. The official documentation at tailwindcss.com covers the full setup process, so use it as the main reference for your project.
The project is distributed through a package manager. Check the documentation for the exact package and setup steps for your build tool.
- Clone the repository from the official GitHub project.
- Read the full documentation at tailwindcss.com before starting a project.
git clone https://github.com/tailwindlabs/tailwindcssApply utility classes in your HTML or templates
Add utility classes to the elements you want to style. You do not create a separate class name in a CSS file for each component. The classes themselves describe the styling.
Responsive layouts are part of the framework, since its topics include responsive utilities. Use them to adjust a layout across screen sizes.
- Put classes on the element in your HTML or component template.
- Combine several classes to build the look you need.
- Use responsive utilities when a layout should change with screen size.
Choose where Tailwind fits in your project
Tailwind suits developers who build their own interfaces and want to avoid large custom stylesheets. It works well when markup and styling live together, as in component-based frameworks.
Teams that need a consistent set of design utilities across a project also benefit from this approach. If you want traditional semantic CSS files, it is a different working style and may not fit.
- Good fit: custom interfaces, consistent design utilities, component-based frameworks, responsive layouts.
- Poor fit: preferring semantic CSS files, or needing a ready-made set of visual components.
Compare Tailwind CSS with similar projects
Projects often compared with Tailwind CSS include Bootstrap, Bulma and UnoCSS. Each takes a different approach to styling, so compare them based on how you like to write CSS and whether you want ready-made components.
Bootstrap and Bulma are commonly used when you want prebuilt styling, while Tailwind is aimed at building custom interfaces from utilities.
- Bootstrap
- Bulma
- UnoCSS
What people use it for
- Building a custom user interface without writing large stylesheets
- Keeping a consistent set of design utilities across a team's project
- Creating responsive layouts inside a component-based framework
- Styling a web app where markup and styling live together
Frequently asked questions
Is Tailwind CSS free to use?
Yes. Tailwind CSS is released under the MIT licence, as shown in the project's listing. Check the LICENSE file in the repository for the full terms.
What do I need before I start with Tailwind CSS?
The source does not list specific prerequisites. The framework assumes you already understand HTML and CSS, so learn those basics first.
How do I install Tailwind CSS?
The README shows cloning the repository from GitHub. For full setup steps using a package manager, follow the official documentation at tailwindcss.com.
Is Tailwind CSS a component library?
No. The README describes it as a framework for building custom interfaces, not a component library. If you need ready-made visual components, consider a tool such as Bootstrap or Bulma.
How is Tailwind CSS different from Bootstrap?
Tailwind is built from small utility classes you combine to build custom designs. Bootstrap is commonly used for prebuilt styling and components. Pick based on whether you want custom utilities or ready-made parts.
Where can I get help with Tailwind CSS?
Use the GitHub Discussions page for help and best-practice questions, and read the full documentation at tailwindcss.com.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Tailwind CSS suits web developers who build their own interfaces and prefer styling directly in markup, especially in component-based frameworks. Pick something else if you prefer traditional semantic CSS files, need ready-made components, or are new to HTML and CSS.
Install options & downloads