tailwindcss

name	tailwindcss
title	Tailwind CSS
category	Frameworks & UI
description	Use to style applications with Tailwind CSS v4 utilities, responsive and state variants, CSS-first theme tokens, dark mode, and production builds.
tags	["tailwindcss","css","styling","responsive","design-system"]
official_docs	https://tailwindcss.com/docs
sources	["https://tailwindcss.com/docs/installation/using-postcss","https://tailwindcss.com/docs/installation/using-vite","https://tailwindcss.com/docs/theme"]
last_verified	2026-08-10T00:00:00.000Z

Tailwind CSS - Skillship

Build custom interfaces with composable utility classes and zero runtime. Tailwind v4 scans source files automatically and defines design tokens directly in CSS with @theme.

🧭 When to use this skill

• Use when: you want fast, consistent UI styling without maintaining a large component stylesheet.
• Use when: you need responsive, state, dark-mode, and container-query variants.
• Don't use for: a tiny page where a few lines of plain CSS are clearer.

⚡ Quickstart

Option A: Vite (preferred for Vite apps)

npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

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

Option B: PostCSS (Next.js, Angular, and other PostCSS apps)

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
export default {
  plugins: { "@tailwindcss/postcss": {} },
};

Import Tailwind once in the global stylesheet

@import "tailwindcss";

Use utilities

export function SaveButton() {
  return (
    <button className="rounded-md bg-cyan-700 px-4 py-2 font-semibold text-white hover:bg-cyan-800 focus-visible:outline-2 focus-visible:outline-offset-2">
      Save
    
  );
}