Tailwind CSS

UI/UX

UI/UXFreeLevel: Intermediate

Tailwind CSS

4.5/52dm rating

Builds interfaces quickly and works well with AI-generated code.

A utility-class CSS framework for building interfaces quickly right in HTML.

Official site How to use it

Overview

Tailwind CSS is a utility-first CSS framework: instead of writing a separate CSS file for each component, you combine small classes such as flex, pt-4 and text-center directly in HTML to build the interface. At the time of checking, the documentation was at version v4.3.

Tailwind supports responsive design through breakpoint prefixes (sm, md, lg, xl), dark mode through the dark: prefix, and customization of colors and fonts through CSS variables in the @theme block. When building for production, Tailwind removes unused CSS.

It is the styling foundation of many popular component sets such as shadcn/ui, so it is well worth learning for teams building websites for businesses.

Highlights

Style right in HTML

Combine utility classes directly on tags, without switching back and forth between many CSS files.

Easy responsive design

Add a breakpoint prefix before a class to change the look by screen size.

Built-in dark mode

Use the dark: prefix to declare colors for the dark theme.

Only ships the CSS you use

Unused CSS is removed from the production build, so pages load fast.

Design tokens via CSS variables

Declare brand colors and fonts in the @theme block for consistent use across the project.

What it's for

Campaign landing pages

Marketers and devs quickly build a sales page and adjust the mobile layout right in HTML.

Business websites

Define brand colors and fonts once and reuse them across every page.

Internal admin pages

Combine with a component set such as shadcn/ui for a consistent interface.

Light and dark themes

Support users who prefer dark mode without rewriting the stylesheet.

How to use it

1
Create a Vite project
If you don't have a project, create one with Vite and move into the project folder.
$npm create vite@latest my-project
2
Install Tailwind and the Vite plugin
Install the tailwindcss package along with the Vite plugin.
$npm install tailwindcss @tailwindcss/vite
3
Register the plugin
Add tailwindcss() to the plugins array in vite.config.ts.
4
Import Tailwind into CSS
Add the line @import "tailwindcss"; to your main CSS file, for example src/style.css.
5
Run and use classes
Start the dev server and begin adding utility classes to your HTML.
$npm run dev

Video guides

Tailwind CSS v4 Full Course 2026 Master Tailwind in One Hour
JavaScript Mastery

Tailwind CSS v4 for Beginners Full Course 2026
Coder Coder

Tailwind CSS v4.1: Text shadows, masks, and tons more
Tailwind Labs

Real-world example

Illustrative scenario

An English center in Hanoi needs an enrollment landing page that displays well on phones because most parents view it through Facebook. The developer creates a Vite project, installs Tailwind and declares the brand blue and font in the @theme block. When the layout needs to change from one column on mobile to two columns on desktop, he just adds the md: prefix to the class instead of opening a separate CSS file.

Tips & notes

Declare brand tokens early
Put colors and fonts in @theme from the start so the whole team uses the right values.
Design mobile first
Write classes for small screens first, then use sm, md, lg for larger screens.
Follow the framework-specific guide
For Next.js, Laravel, Nuxt and others, use the separate installation guides in the documentation.