重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
tailwind-css by manutej/luxor-claude-marketplace
npx skills add https://github.com/manutej/luxor-claude-marketplace --skill tailwind-css一个全面掌握 Tailwind CSS 的技能,这是一个用于快速构建自定义用户界面的实用优先 CSS 框架。本技能涵盖核心概念、响应式设计模式、组件提取、深色模式实现、主题定制和生产优化。
在以下情况下使用此技能:
Tailwind CSS 采用与传统 CSS 框架不同的方法:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
<!-- Block and inline -->
<div class="block">Block element</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline-block</div>
<!-- Flexbox -->
<div class="flex items-center justify-between">
<div>Left</div>
<div>Right</div>
</div>
<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- Hidden -->
<div class="hidden md:block">Visible on medium screens and up</div>
<!-- Static, relative, absolute, fixed, sticky -->
<div class="relative">
<div class="absolute top-0 right-0">Top-right corner</div>
</div>
<div class="fixed bottom-4 right-4">Fixed bottom-right</div>
<div class="sticky top-0">Sticky header</div>
<!-- Width and height -->
<div class="w-full h-screen">Full width, viewport height</div>
<div class="w-1/2 h-64">Half width, 16rem height</div>
<div class="w-[750px] h-[500px]">Arbitrary values</div>
<!-- Min/max -->
<div class="min-w-0 max-w-md">Constrained width</div>
<div class="min-h-screen max-h-full">Constrained height</div>
<!-- All sides -->
<div class="p-4 m-2">Padding 1rem, margin 0.5rem</div>
<!-- Individual sides -->
<div class="pt-8 pb-4 pl-6 pr-2">Individual padding</div>
<div class="mt-4 mb-8 ml-auto mr-auto">Individual margin</div>
<!-- Logical properties -->
<div class="px-4 py-2">Horizontal and vertical</div>
<div class="ps-4 pe-2">Inline start/end (RTL-aware)</div>
<!-- Negative margins -->
<div class="-mt-4 -ml-2">Negative margins for overlap</div>
<!-- Space between -->
<div class="flex space-x-4">Horizontal spacing between children</div>
<div class="flex flex-col space-y-2">Vertical spacing between children</div>
<!-- Font families -->
<p class="font-sans">Sans-serif font</p>
<p class="font-serif">Serif font</p>
<p class="font-mono">Monospace font</p>
<!-- Font sizes -->
<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra large (1.25rem)</p>
<h1 class="text-4xl">4XL heading (2.25rem)</h1>
<!-- Font weights -->
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<!-- Text alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<!-- Text color -->
<p class="text-gray-900">Dark gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500/75">Red text with 75% opacity</p>
<!-- Text decoration -->
<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<a class="no-underline hover:underline">Hover underline</a>
<!-- Text transform -->
<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalize Each Word</p>
<!-- Line height and letter spacing -->
<p class="leading-tight">Tight line height</p>
<p class="leading-relaxed">Relaxed line height</p>
<p class="tracking-wide">Wide letter spacing</p>
<!-- Solid backgrounds -->
<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-red-600/50">Red background at 50% opacity</div>
<!-- Gradients -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
Purple to pink gradient
</div>
<div class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-600">
Three-color gradient
</div>
<!-- Text colors -->
<p class="text-gray-900 dark:text-white">Adaptive text color</p>
<p class="text-blue-600 hover:text-blue-800">Interactive text color</p>
<!-- Border colors -->
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Thick blue border</div>
<div class="divide-y divide-gray-200">Divided children</div>
<!-- Border width -->
<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-t-4">4px top border only</div>
<!-- Border radius -->
<div class="rounded">0.25rem radius</div>
<div class="rounded-lg">0.5rem radius</div>
<div class="rounded-full">Full circle/pill</div>
<div class="rounded-t-lg">Round top only</div>
<!-- Border style -->
<div class="border-solid">Solid border</div>
<div class="border-dashed">Dashed border</div>
<div class="border-dotted">Dotted border</div>
<!-- Box shadows -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-none hover:shadow-lg">Interactive shadow</div>
<!-- Text shadow -->
<h1 class="text-shadow-lg">Large text shadow</h1>
<p class="text-shadow-sm text-shadow-gray-300">Colored text shadow</p>
<!-- Opacity -->
<div class="opacity-50">50% opacity</div>
<div class="opacity-0 hover:opacity-100">Fade in on hover</div>
Tailwind 使用移动优先的断点系统:
/* Breakpoint reference */
sm: 640px /* @media (min-width: 640px) */
md: 768px /* @media (min-width: 768px) */
lg: 1024px /* @media (min-width: 1024px) */
xl: 1280px /* @media (min-width: 1280px) */
2xl: 1536px /* @media (min-width: 1536px) */
<!-- Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
Full width on mobile, half on tablet, third on desktop
</div>
<!-- Responsive flexbox -->
<div class="flex flex-col md:flex-row gap-4">
Vertical on mobile, horizontal on tablet+
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
1 column mobile, 2 tablet, 4 desktop
</div>
<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
Scales with screen size
</h1>
<!-- Show/hide at breakpoints -->
<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>
<div class="hidden md:block lg:hidden">Tablet only</div>
/* app.css */
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem; /* 480px */
--breakpoint-3xl: 120rem; /* 1920px */
}
<!-- Using custom breakpoints -->
<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
Uses custom xs and 3xl breakpoints
</div>
<!-- Active only between md and xl -->
<div class="md:max-xl:flex">
Flex layout only on tablets
</div>
<!-- Max-width utilities -->
<div class="flex max-md:hidden">
Hidden below medium breakpoint
</div>
<!-- Container-based responsive design -->
<div class="@container">
<div class="@lg:grid-cols-3 grid grid-cols-1">
Responds to container size, not viewport
</div>
</div>
<!-- Arbitrary container queries -->
<div class="@container">
<div class="flex flex-col @min-[475px]:flex-row">
Custom container breakpoint
</div>
</div>
<!-- Using container query units -->
<div class="@container">
<div class="w-[50cqw]">
50% of container width
</div>
</div>
基于系统偏好的默认行为:
<!-- Automatically adapts to system preference -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h3 class="text-gray-900 dark:text-white font-semibold">
Card Title
</h3>
<p class="text-gray-500 dark:text-gray-400">
Content automatically adapts to color scheme preference
</p>
</div>
</div>
配置自定义变体以进行手动控制:
/* app.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
<!-- Toggle dark mode with class -->
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
Controlled by .dark class on ancestor
</div>
</body>
</html>
// Dark mode toggle with localStorage persistence
// Add inline in <head> to avoid FOUC (Flash of Unstyled Content)
document.documentElement.classList.toggle(
"dark",
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
);
// User explicitly chooses light mode
function setLightMode() {
localStorage.theme = "light";
document.documentElement.classList.remove("dark");
}
// User explicitly chooses dark mode
function setDarkMode() {
localStorage.theme = "dark";
document.documentElement.classList.add("dark");
}
// User chooses to respect OS preference
function setSystemMode() {
localStorage.removeItem("theme");
document.documentElement.classList.toggle(
"dark",
window.matchMedia("(prefers-color-scheme: dark)").matches
);
}
使用数据属性的替代方法:
/* app.css */
@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
Uses data-theme attribute
</div>
</body>
</html>
<!-- Hover, focus, active states -->
<button class="
bg-blue-500
hover:bg-blue-600
focus:bg-blue-700
active:bg-blue-800
focus:outline-2
focus:outline-offset-2
focus:outline-blue-500
">
Interactive button
</button>
<!-- Disabled state -->
<button class="
bg-blue-500
disabled:opacity-50
disabled:cursor-not-allowed
" disabled>
Disabled button
</button>
<!-- Focus within -->
<div class="border-2 border-transparent focus-within:border-blue-500">
<input class="outline-none" placeholder="Focus container changes" />
</div>
<!-- Input states -->
<input class="
border
border-gray-300
focus:border-blue-500
focus:ring-2
focus:ring-blue-200
invalid:border-red-500
placeholder:text-gray-400
" />
<!-- Checkbox and radio -->
<input type="checkbox" class="
checked:bg-blue-500
indeterminate:bg-gray-500
" />
<!-- File input -->
<input type="file" class="
file:mr-4
file:rounded-full
file:border-0
file:bg-violet-50
file:px-4
file:py-2
file:text-sm
file:font-semibold
hover:file:bg-violet-100
" />
<!-- First, last, odd, even -->
<ul>
<li class="first:font-bold">First item is bold</li>
<li class="even:bg-gray-100">Even items have background</li>
<li class="last:border-b-0">Last item has no border</li>
</ul>
<!-- Before and after -->
<div class="
before:content-['→']
before:mr-2
after:content-['←']
after:ml-2
">
Content with decorations
</div>
<!-- Group hover -->
<div class="group">
<img class="group-hover:opacity-75" src="..." />
<p class="group-hover:text-blue-600">Hover parent to affect children</p>
</div>
<!-- Peer state -->
<input type="checkbox" class="peer" id="toggle" />
<label class="peer-checked:text-blue-600" for="toggle">
Changes when checkbox is checked
</label>
<!-- Motion preferences -->
<button class="
transition
hover:-translate-y-1
motion-reduce:transition-none
motion-reduce:hover:translate-y-0
">
Respects user motion preference
</button>
<!-- Contrast preferences -->
<label>
<input class="contrast-more:border-gray-400" />
<p class="opacity-75 contrast-more:opacity-100">
Adjusts for contrast needs
</p>
</label>
<!-- Print styles -->
<article class="print:hidden">Not shown when printing</article>
<div class="hidden print:block">Only visible in print</div>
<!-- Orientation -->
<div class="portrait:hidden">Hidden in portrait mode</div>
<div class="landscape:grid-cols-2">Adapts to orientation</div>
在以下情况下提取组件:
// Button.jsx - Reusable component with variants
export function Button({ size = 'md', variant = 'primary', children, ...props }) {
const baseStyles = "font-bold rounded transition focus:outline-2 focus:outline-offset-2";
const sizeStyles = {
sm: "px-3 py-1.5 text-sm",
md: "px-4 py-2 text-base",
lg: "px-5 py-3 text-lg"
};
const variantStyles = {
primary: "bg-blue-500 text-white hover:bg-blue-600 focus:outline-blue-500",
secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-gray-500",
danger: "bg-red-500 text-white hover:bg-red-600 focus:outline-red-500"
};
return (
<button
className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]}`}
{...props}
>
{children}
</button>
);
}
// Usage
<Button size="lg" variant="primary">Save Changes</Button>
<Button size="sm" variant="danger">Delete</Button>
<!-- Card.vue -->
<template>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
{{ title }}
</h3>
<p class="text-gray-600 dark:text-gray-400">
<slot />
</p>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
}
}
}
</script>
<!-- Usage -->
<Card title="Feature Title">
This is the card content that adapts to dark mode.
</Card>
<!-- Alert.svelte -->
<script>
export let type = 'info'; // info, success, warning, error
const styles = {
info: 'bg-blue-50 border-blue-200 text-blue-800',
success: 'bg-green-50 border-green-200 text-green-800',
warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
error: 'bg-red-50 border-red-200 text-red-800'
};
</script>
<div class="border-l-4 p-4 {styles[type]}" role="alert">
<slot />
</div>
<!-- Usage -->
<Alert type="success">
Your changes have been saved successfully!
</Alert>
对于非组件框架或共享样式:
/* app.css */
@import "tailwindcss";
/* Component layer for reusable patterns */
@layer components {
.btn {
@apply font-bold py-2 px-4 rounded transition;
}
.btn-primary {
@apply bg-blue-500 text-white;
@apply hover:bg-blue-600;
@apply focus:outline-2 focus:outline-offset-2 focus:outline-blue-500;
}
.btn-secondary {
@apply bg-gray-200 text-gray-900;
@apply hover:bg-gray-300;
}
.card {
@apply bg-white rounded-lg shadow-xl p-6;
@apply dark:bg-gray-800;
}
.input-field {
@apply border border-gray-300 rounded px-3 py-2;
@apply focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
@apply dark:bg-gray-700 dark:border-gray-600;
}
}
<!-- Using component classes -->
<button class="btn btn-primary">Primary Action</button>
<div class="card">
<h3>Card Title</h3>
<p>Card content</p>
</div>
<input class="input-field" placeholder="Enter text..." />
/* app.css */
@import "tailwindcss";
@theme {
/* Custom colors */
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
--color-brand-blue: #3b82f6;
--color-brand-purple: #a855f7;
/* Custom spacing */
--spacing-18: 4.5rem;
--spacing-72: 18rem;
/* Custom breakpoints */
--breakpoint-xs: 30rem;
--breakpoint-3xl: 120rem;
/* Custom fonts */
--font-display: "Montserrat", sans-serif;
--font-body: "Inter", sans-serif;
/* Custom shadows */
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.5);
/* Custom border radius */
--radius-4xl: 2rem;
/* Custom z-index */
--z-index-dropdown: 1000;
--z-index-modal: 2000;
}
<!-- Using custom theme values -->
<div class="bg-primary text-white">Primary color</div>
<div class="font-display text-4xl">Display font</div>
<div class="shadow-glow rounded-4xl">Custom shadow and radius</div>
<div class="xs:grid-cols-2 3xl:grid-cols-6">Custom breakpoints</div>
/* Dynamic theming with CSS variables */
@import "tailwindcss";
@theme {
--color-primary-50: oklch(0.95 0.02 250);
--color-primary-100: oklch(0.90 0.04 250);
--color-primary-200: oklch(0.85 0.08 250);
--color-primary-500: oklch(0.55 0.22 250);
--color-primary-900: oklch(0.25 0.15 250);
}
<!-- Arbitrary values with CSS variables -->
<div class="bg-[var(--color-primary-500)]">
Using CSS variable
</div>
<!-- Setting CSS variables inline -->
<div class="[--spacing:1rem] lg:[--spacing:2rem]">
<div class="p-[var(--spacing)]">
Responsive custom property
</div>
</div>
/* app.css */
@import "tailwindcss";
/* Simple utility */
@utility content-auto {
content-visibility: auto;
}
/* Complex utility with nesting */
@utility scrollbar-hidden {
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
}
<!-- Using custom utilities -->
<div class="content-auto hover:content-auto">
Supports all variants automatically
</div>
<div class="scrollbar-hidden">
Hidden scrollbar
</div>
/* app.css */
@import "tailwindcss";
/* Define theme values */
@theme {
--tab-size-2: 2;
--tab-size-4: 4;
--tab-size-8: 8;
}
/* Functional utility accepting arguments */
@utility tab-* {
tab-size: --value(--tab-size-*);
}
/* Utility with modifiers */
@utility text-* {
font-size: --value(--text-*, [length]);
line-height: --modifier(--leading-*, [length], [*]);
}
/* Supporting arbitrary values */
@utility opacity-* {
opacity: --value([percentage]);
opacity: calc(--value(integer) * 1%);
opacity: --value(--opacity-*);
}
<!-- Using functional utilities -->
<div class="tab-4">Tab size 4</div>
<div class="tab-[12]">Arbitrary tab size</div>
<p class="text-2xl/relaxed">Font size with line height modifier</p>
<div class="opacity-50">50% opacity from theme</div>
<div class="opacity-[0.35]">Arbitrary opacity</div>
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
build: {
minify: 'terser',
cssMinify: true,
}
})
确保 Tailwind 扫描所有文件:
/* app.css */
@import "tailwindcss";
@source "../../**/*.{html,js,jsx,ts,tsx,vue,svelte}";
使用 JIT 模式(在 v4 中默认启用)
最小化任意值
避免深度嵌套
优化图片
<img
class="w-full h-auto"
src="/image.jpg"
loading="lazy"
decoding="async"
/>
使用 CSS 包含
<div class="content-auto">
Browser can optimize rendering
</div>
npm install @tailwindcss/typography
<!-- Beautiful typography for markdown/CMS content -->
<article class="prose lg:prose-xl dark:prose-invert">
<h1>Article Title</h1>
<p>Automatically styled content with sensible defaults.</p>
</article>
npm install @tailwindcss/forms
<!-- Better default form styles -->
<form class="space-y-4">
<input type="text" class="form-input rounded-md" />
<select class="form-select rounded-md"></select>
<textarea class="form-textarea rounded-md"></textarea>
</form>
npm install @tailwindcss/container-queries
<div class="@container">
<div class="@lg:grid-cols-3">
Responds to container, not viewport
</div>
</div>
// tailwind.config.ts
import type { Config } from 'tailwindcss'
export default {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
} satisfies Config
// Component with Tailwind
export default function Hero() {
return (
<section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
<div className="container mx-auto px-4">
<h1 className="text-5xl font-bold mb-4">Welcome</h1>
<p className="text-xl">Beautiful UI with Tailwind CSS</p>
</div>
</section>
)
}
// nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
vite: {
plugins: [tailwindcss()],
},
})
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
export default {
plugins: [tailwindcss(), sveltekit()],
};
使用语义化 HTML
<!-- Good -->
<article class="bg-white rounded-lg p-6">
<h2 class="text-2xl font-bold">Title</h2>
</article>
<!-- Avoid -->
<div class="bg-white rounded-lg p-6">
<div class="text-2xl font-bold">Title</div>
</div>
一致地排序实用类
<!-- Suggested order: layout → spacing → sizing → typography → visual → misc -->
<div class="
flex items-center justify-between
p-4 mx-auto
w-full max-w-4xl
text-lg font-semibold
bg-white rounded-lg shadow-md
hover:shadow-lg transition
">
提取重复模式
// Don't repeat long class strings
const cardClasses = "bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6";
<div className={cardClasses}>Card 1</div>
<div className={cardClasses}>Card 2</div>
<!-- Focus states -->
<button class="focus:outline-2 focus:outline-offset-2 focus:outline-blue-500">
Accessible button
</button>
<!-- Screen reader only -->
<span class="sr-only">Additional context for screen readers</span>
<!-- High contrast mode -->
<div class="border border-gray-300 forced-colors:border-current">
Adapts to forced colors mode
</div>
<!-- Reduced motion -->
<div class="transition-transform motion-reduce:transition-none">
Respects prefers-reduced-motion
</div>
避免为动态值使用内联样式
// Good - use CSS variables
<button
style={{ backgroundColor: buttonColor }}
className="rounded-md px-3 py-1.5"
>
// Avoid - generates unique CSS for each color
<button className={`bg-[${buttonColor}]`}>
利用清除功能
为首屏渲染优化
<!-- Inline critical CSS in <head> -->
<style>
.hero { /* Critical above-fold styles */ }
</style>
<nav class="bg-white dark:bg-gray-900 shadow-lg">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center">
<img class="h-8 w-auto" src="/logo.svg" alt="Logo" />
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Home</a>
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">About</a>
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Contact</a>
</div>
<!-- Mobile menu button -->
<button class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</nav>
<section class="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20 lg:py-32">
<div class="container mx-auto px-4">
<div class="
A comprehensive skill for mastering Tailwind CSS, the utility-first CSS framework for rapidly building custom user interfaces. This skill covers core concepts, responsive design patterns, component extraction, dark mode implementation, theme customization, and production optimization.
Use this skill when:
Tailwind CSS takes a different approach from traditional CSS frameworks:
<!-- Block and inline -->
<div class="block">Block element</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline-block</div>
<!-- Flexbox -->
<div class="flex items-center justify-between">
<div>Left</div>
<div>Right</div>
</div>
<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- Hidden -->
<div class="hidden md:block">Visible on medium screens and up</div>
<!-- Static, relative, absolute, fixed, sticky -->
<div class="relative">
<div class="absolute top-0 right-0">Top-right corner</div>
</div>
<div class="fixed bottom-4 right-4">Fixed bottom-right</div>
<div class="sticky top-0">Sticky header</div>
<!-- Width and height -->
<div class="w-full h-screen">Full width, viewport height</div>
<div class="w-1/2 h-64">Half width, 16rem height</div>
<div class="w-[750px] h-[500px]">Arbitrary values</div>
<!-- Min/max -->
<div class="min-w-0 max-w-md">Constrained width</div>
<div class="min-h-screen max-h-full">Constrained height</div>
<!-- All sides -->
<div class="p-4 m-2">Padding 1rem, margin 0.5rem</div>
<!-- Individual sides -->
<div class="pt-8 pb-4 pl-6 pr-2">Individual padding</div>
<div class="mt-4 mb-8 ml-auto mr-auto">Individual margin</div>
<!-- Logical properties -->
<div class="px-4 py-2">Horizontal and vertical</div>
<div class="ps-4 pe-2">Inline start/end (RTL-aware)</div>
<!-- Negative margins -->
<div class="-mt-4 -ml-2">Negative margins for overlap</div>
<!-- Space between -->
<div class="flex space-x-4">Horizontal spacing between children</div>
<div class="flex flex-col space-y-2">Vertical spacing between children</div>
<!-- Font families -->
<p class="font-sans">Sans-serif font</p>
<p class="font-serif">Serif font</p>
<p class="font-mono">Monospace font</p>
<!-- Font sizes -->
<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra large (1.25rem)</p>
<h1 class="text-4xl">4XL heading (2.25rem)</h1>
<!-- Font weights -->
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<!-- Text alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<!-- Text color -->
<p class="text-gray-900">Dark gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500/75">Red text with 75% opacity</p>
<!-- Text decoration -->
<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<a class="no-underline hover:underline">Hover underline</a>
<!-- Text transform -->
<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalize Each Word</p>
<!-- Line height and letter spacing -->
<p class="leading-tight">Tight line height</p>
<p class="leading-relaxed">Relaxed line height</p>
<p class="tracking-wide">Wide letter spacing</p>
<!-- Solid backgrounds -->
<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-red-600/50">Red background at 50% opacity</div>
<!-- Gradients -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
Purple to pink gradient
</div>
<div class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-600">
Three-color gradient
</div>
<!-- Text colors -->
<p class="text-gray-900 dark:text-white">Adaptive text color</p>
<p class="text-blue-600 hover:text-blue-800">Interactive text color</p>
<!-- Border colors -->
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Thick blue border</div>
<div class="divide-y divide-gray-200">Divided children</div>
<!-- Border width -->
<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-t-4">4px top border only</div>
<!-- Border radius -->
<div class="rounded">0.25rem radius</div>
<div class="rounded-lg">0.5rem radius</div>
<div class="rounded-full">Full circle/pill</div>
<div class="rounded-t-lg">Round top only</div>
<!-- Border style -->
<div class="border-solid">Solid border</div>
<div class="border-dashed">Dashed border</div>
<div class="border-dotted">Dotted border</div>
<!-- Box shadows -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-none hover:shadow-lg">Interactive shadow</div>
<!-- Text shadow -->
<h1 class="text-shadow-lg">Large text shadow</h1>
<p class="text-shadow-sm text-shadow-gray-300">Colored text shadow</p>
<!-- Opacity -->
<div class="opacity-50">50% opacity</div>
<div class="opacity-0 hover:opacity-100">Fade in on hover</div>
Tailwind uses a mobile-first breakpoint system:
/* Breakpoint reference */
sm: 640px /* @media (min-width: 640px) */
md: 768px /* @media (min-width: 768px) */
lg: 1024px /* @media (min-width: 1024px) */
xl: 1280px /* @media (min-width: 1280px) */
2xl: 1536px /* @media (min-width: 1536px) */
<!-- Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
Full width on mobile, half on tablet, third on desktop
</div>
<!-- Responsive flexbox -->
<div class="flex flex-col md:flex-row gap-4">
Vertical on mobile, horizontal on tablet+
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
1 column mobile, 2 tablet, 4 desktop
</div>
<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
Scales with screen size
</h1>
<!-- Show/hide at breakpoints -->
<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>
<div class="hidden md:block lg:hidden">Tablet only</div>
/* app.css */
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem; /* 480px */
--breakpoint-3xl: 120rem; /* 1920px */
}
<!-- Using custom breakpoints -->
<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
Uses custom xs and 3xl breakpoints
</div>
<!-- Active only between md and xl -->
<div class="md:max-xl:flex">
Flex layout only on tablets
</div>
<!-- Max-width utilities -->
<div class="flex max-md:hidden">
Hidden below medium breakpoint
</div>
<!-- Container-based responsive design -->
<div class="@container">
<div class="@lg:grid-cols-3 grid grid-cols-1">
Responds to container size, not viewport
</div>
</div>
<!-- Arbitrary container queries -->
<div class="@container">
<div class="flex flex-col @min-[475px]:flex-row">
Custom container breakpoint
</div>
</div>
<!-- Using container query units -->
<div class="@container">
<div class="w-[50cqw]">
50% of container width
</div>
</div>
Default behavior based on system preference:
<!-- Automatically adapts to system preference -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h3 class="text-gray-900 dark:text-white font-semibold">
Card Title
</h3>
<p class="text-gray-500 dark:text-gray-400">
Content automatically adapts to color scheme preference
</p>
</div>
</div>
Configure custom variant for manual control:
/* app.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
<!-- Toggle dark mode with class -->
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
Controlled by .dark class on ancestor
</div>
</body>
</html>
// Dark mode toggle with localStorage persistence
// Add inline in <head> to avoid FOUC (Flash of Unstyled Content)
document.documentElement.classList.toggle(
"dark",
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
);
// User explicitly chooses light mode
function setLightMode() {
localStorage.theme = "light";
document.documentElement.classList.remove("dark");
}
// User explicitly chooses dark mode
function setDarkMode() {
localStorage.theme = "dark";
document.documentElement.classList.add("dark");
}
// User chooses to respect OS preference
function setSystemMode() {
localStorage.removeItem("theme");
document.documentElement.classList.toggle(
"dark",
window.matchMedia("(prefers-color-scheme: dark)").matches
);
}
Alternative approach using data attributes:
/* app.css */
@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
Uses data-theme attribute
</div>
</body>
</html>
<!-- Hover, focus, active states -->
<button class="
bg-blue-500
hover:bg-blue-600
focus:bg-blue-700
active:bg-blue-800
focus:outline-2
focus:outline-offset-2
focus:outline-blue-500
">
Interactive button
</button>
<!-- Disabled state -->
<button class="
bg-blue-500
disabled:opacity-50
disabled:cursor-not-allowed
" disabled>
Disabled button
</button>
<!-- Focus within -->
<div class="border-2 border-transparent focus-within:border-blue-500">
<input class="outline-none" placeholder="Focus container changes" />
</div>
<!-- Input states -->
<input class="
border
border-gray-300
focus:border-blue-500
focus:ring-2
focus:ring-blue-200
invalid:border-red-500
placeholder:text-gray-400
" />
<!-- Checkbox and radio -->
<input type="checkbox" class="
checked:bg-blue-500
indeterminate:bg-gray-500
" />
<!-- File input -->
<input type="file" class="
file:mr-4
file:rounded-full
file:border-0
file:bg-violet-50
file:px-4
file:py-2
file:text-sm
file:font-semibold
hover:file:bg-violet-100
" />
<!-- First, last, odd, even -->
<ul>
<li class="first:font-bold">First item is bold</li>
<li class="even:bg-gray-100">Even items have background</li>
<li class="last:border-b-0">Last item has no border</li>
</ul>
<!-- Before and after -->
<div class="
before:content-['→']
before:mr-2
after:content-['←']
after:ml-2
">
Content with decorations
</div>
<!-- Group hover -->
<div class="group">
<img class="group-hover:opacity-75" src="..." />
<p class="group-hover:text-blue-600">Hover parent to affect children</p>
</div>
<!-- Peer state -->
<input type="checkbox" class="peer" id="toggle" />
<label class="peer-checked:text-blue-600" for="toggle">
Changes when checkbox is checked
</label>
<!-- Motion preferences -->
<button class="
transition
hover:-translate-y-1
motion-reduce:transition-none
motion-reduce:hover:translate-y-0
">
Respects user motion preference
</button>
<!-- Contrast preferences -->
<label>
<input class="contrast-more:border-gray-400" />
<p class="opacity-75 contrast-more:opacity-100">
Adjusts for contrast needs
</p>
</label>
<!-- Print styles -->
<article class="print:hidden">Not shown when printing</article>
<div class="hidden print:block">Only visible in print</div>
<!-- Orientation -->
<div class="portrait:hidden">Hidden in portrait mode</div>
<div class="landscape:grid-cols-2">Adapts to orientation</div>
Extract components when:
// Button.jsx - Reusable component with variants
export function Button({ size = 'md', variant = 'primary', children, ...props }) {
const baseStyles = "font-bold rounded transition focus:outline-2 focus:outline-offset-2";
const sizeStyles = {
sm: "px-3 py-1.5 text-sm",
md: "px-4 py-2 text-base",
lg: "px-5 py-3 text-lg"
};
const variantStyles = {
primary: "bg-blue-500 text-white hover:bg-blue-600 focus:outline-blue-500",
secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-gray-500",
danger: "bg-red-500 text-white hover:bg-red-600 focus:outline-red-500"
};
return (
<button
className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]}`}
{...props}
>
{children}
</button>
);
}
// Usage
<Button size="lg" variant="primary">Save Changes</Button>
<Button size="sm" variant="danger">Delete</Button>
<!-- Card.vue -->
<template>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
{{ title }}
</h3>
<p class="text-gray-600 dark:text-gray-400">
<slot />
</p>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
}
}
}
</script>
<!-- Usage -->
<Card title="Feature Title">
This is the card content that adapts to dark mode.
</Card>
<!-- Alert.svelte -->
<script>
export let type = 'info'; // info, success, warning, error
const styles = {
info: 'bg-blue-50 border-blue-200 text-blue-800',
success: 'bg-green-50 border-green-200 text-green-800',
warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
error: 'bg-red-50 border-red-200 text-red-800'
};
</script>
<div class="border-l-4 p-4 {styles[type]}" role="alert">
<slot />
</div>
<!-- Usage -->
<Alert type="success">
Your changes have been saved successfully!
</Alert>
For non-component frameworks or shared styles:
/* app.css */
@import "tailwindcss";
/* Component layer for reusable patterns */
@layer components {
.btn {
@apply font-bold py-2 px-4 rounded transition;
}
.btn-primary {
@apply bg-blue-500 text-white;
@apply hover:bg-blue-600;
@apply focus:outline-2 focus:outline-offset-2 focus:outline-blue-500;
}
.btn-secondary {
@apply bg-gray-200 text-gray-900;
@apply hover:bg-gray-300;
}
.card {
@apply bg-white rounded-lg shadow-xl p-6;
@apply dark:bg-gray-800;
}
.input-field {
@apply border border-gray-300 rounded px-3 py-2;
@apply focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
@apply dark:bg-gray-700 dark:border-gray-600;
}
}
<!-- Using component classes -->
<button class="btn btn-primary">Primary Action</button>
<div class="card">
<h3>Card Title</h3>
<p>Card content</p>
</div>
<input class="input-field" placeholder="Enter text..." />
/* app.css */
@import "tailwindcss";
@theme {
/* Custom colors */
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
--color-brand-blue: #3b82f6;
--color-brand-purple: #a855f7;
/* Custom spacing */
--spacing-18: 4.5rem;
--spacing-72: 18rem;
/* Custom breakpoints */
--breakpoint-xs: 30rem;
--breakpoint-3xl: 120rem;
/* Custom fonts */
--font-display: "Montserrat", sans-serif;
--font-body: "Inter", sans-serif;
/* Custom shadows */
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.5);
/* Custom border radius */
--radius-4xl: 2rem;
/* Custom z-index */
--z-index-dropdown: 1000;
--z-index-modal: 2000;
}
<!-- Using custom theme values -->
<div class="bg-primary text-white">Primary color</div>
<div class="font-display text-4xl">Display font</div>
<div class="shadow-glow rounded-4xl">Custom shadow and radius</div>
<div class="xs:grid-cols-2 3xl:grid-cols-6">Custom breakpoints</div>
/* Dynamic theming with CSS variables */
@import "tailwindcss";
@theme {
--color-primary-50: oklch(0.95 0.02 250);
--color-primary-100: oklch(0.90 0.04 250);
--color-primary-200: oklch(0.85 0.08 250);
--color-primary-500: oklch(0.55 0.22 250);
--color-primary-900: oklch(0.25 0.15 250);
}
<!-- Arbitrary values with CSS variables -->
<div class="bg-[var(--color-primary-500)]">
Using CSS variable
</div>
<!-- Setting CSS variables inline -->
<div class="[--spacing:1rem] lg:[--spacing:2rem]">
<div class="p-[var(--spacing)]">
Responsive custom property
</div>
</div>
/* app.css */
@import "tailwindcss";
/* Simple utility */
@utility content-auto {
content-visibility: auto;
}
/* Complex utility with nesting */
@utility scrollbar-hidden {
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
}
<!-- Using custom utilities -->
<div class="content-auto hover:content-auto">
Supports all variants automatically
</div>
<div class="scrollbar-hidden">
Hidden scrollbar
</div>
/* app.css */
@import "tailwindcss";
/* Define theme values */
@theme {
--tab-size-2: 2;
--tab-size-4: 4;
--tab-size-8: 8;
}
/* Functional utility accepting arguments */
@utility tab-* {
tab-size: --value(--tab-size-*);
}
/* Utility with modifiers */
@utility text-* {
font-size: --value(--text-*, [length]);
line-height: --modifier(--leading-*, [length], [*]);
}
/* Supporting arbitrary values */
@utility opacity-* {
opacity: --value([percentage]);
opacity: calc(--value(integer) * 1%);
opacity: --value(--opacity-*);
}
<!-- Using functional utilities -->
<div class="tab-4">Tab size 4</div>
<div class="tab-[12]">Arbitrary tab size</div>
<p class="text-2xl/relaxed">Font size with line height modifier</p>
<div class="opacity-50">50% opacity from theme</div>
<div class="opacity-[0.35]">Arbitrary opacity</div>
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
build: {
minify: 'terser',
cssMinify: true,
}
})
Ensure Tailwind scans all files:
/* app.css */
@import "tailwindcss";
@source "../../**/*.{html,js,jsx,ts,tsx,vue,svelte}";
Use JIT Mode (enabled by default in v4)
Minimize Arbitrary Values
Avoid Deep Nesting
Optimize Images
<img
class="w-full h-auto"
src="/image.jpg"
loading="lazy"
decoding="async"
/>
Use CSS Containment
<div class="content-auto">
Browser can optimize rendering
</div>
npm install @tailwindcss/typography
<!-- Beautiful typography for markdown/CMS content -->
<article class="prose lg:prose-xl dark:prose-invert">
<h1>Article Title</h1>
<p>Automatically styled content with sensible defaults.</p>
</article>
npm install @tailwindcss/forms
<!-- Better default form styles -->
<form class="space-y-4">
<input type="text" class="form-input rounded-md" />
<select class="form-select rounded-md"></select>
<textarea class="form-textarea rounded-md"></textarea>
</form>
npm install @tailwindcss/container-queries
<div class="@container">
<div class="@lg:grid-cols-3">
Responds to container, not viewport
</div>
</div>
// tailwind.config.ts
import type { Config } from 'tailwindcss'
export default {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
} satisfies Config
// Component with Tailwind
export default function Hero() {
return (
<section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
<div className="container mx-auto px-4">
<h1 className="text-5xl font-bold mb-4">Welcome</h1>
<p className="text-xl">Beautiful UI with Tailwind CSS</p>
</div>
</section>
)
}
// nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
vite: {
plugins: [tailwindcss()],
},
})
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
export default {
plugins: [tailwindcss(), sveltekit()],
};
Use Semantic HTML
<!-- Good -->
<article class="bg-white rounded-lg p-6">
<h2 class="text-2xl font-bold">Title</h2>
</article>
<!-- Avoid -->
<div class="bg-white rounded-lg p-6">
<div class="text-2xl font-bold">Title</div>
</div>
Order Utilities Consistently
<!-- Suggested order: layout → spacing → sizing → typography → visual → misc -->
<div class="
flex items-center justify-between
p-4 mx-auto
w-full max-w-4xl
text-lg font-semibold
bg-white rounded-lg shadow-md
hover:shadow-lg transition
">
Extract Repeated Patterns
// Don't repeat long class strings
const cardClasses = "bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6";
<div className={cardClasses}>Card 1</div>
<div className={cardClasses}>Card 2</div>
<!-- Focus states -->
<button class="focus:outline-2 focus:outline-offset-2 focus:outline-blue-500">
Accessible button
</button>
<!-- Screen reader only -->
<span class="sr-only">Additional context for screen readers</span>
<!-- High contrast mode -->
<div class="border border-gray-300 forced-colors:border-current">
Adapts to forced colors mode
</div>
<!-- Reduced motion -->
<div class="transition-transform motion-reduce:transition-none">
Respects prefers-reduced-motion
</div>
Avoid Inline Styles for Dynamic Values
// Good - use CSS variables
<button
style={{ backgroundColor: buttonColor }}
className="rounded-md px-3 py-1.5"
>
// Avoid - generates unique CSS for each color
<button className={`bg-[${buttonColor}]`}>
Leverage Purging
Optimize for First Paint
<!-- Inline critical CSS in <head> -->
<style>
.hero { /* Critical above-fold styles */ }
</style>
<nav class="bg-white dark:bg-gray-900 shadow-lg">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center">
<img class="h-8 w-auto" src="/logo.svg" alt="Logo" />
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Home</a>
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">About</a>
<a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Contact</a>
</div>
<!-- Mobile menu button -->
<button class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</nav>
<section class="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20 lg:py-32">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Build Amazing Websites
</h1>
<p class="text-xl md:text-2xl mb-8 text-blue-100">
Create beautiful, responsive designs with Tailwind CSS
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
Get Started
</button>
<button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
Learn More
</button>
</div>
</div>
</div>
</section>
<section class="py-16 bg-gray-50 dark:bg-gray-900">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">
Our Features
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition">
<div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
Lightning Fast
</h3>
<p class="text-gray-600 dark:text-gray-400">
Build and ship faster with utility-first CSS approach.
</p>
</div>
<!-- More feature cards... -->
</div>
</div>
</section>
Styles not applying
Dark mode not working
Responsive classes not working
Build is slow
File size too large
Skill Version : 1.0.0 Last Updated : October 2025 Skill Category : CSS Framework, UI Development, Design Systems Compatible With : React, Vue, Svelte, Next.js, Nuxt, SvelteKit, Astro, and vanilla HTML
Weekly Installs
54
Repository
GitHub Stars
44
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode43
gemini-cli42
cursor40
codex39
claude-code37
github-copilot36
impeccable:创建独特生产级前端界面,告别AI垃圾美学
7,500 周安装
液态玻璃设计指南:使用 SwiftUI 构建原生 macOS/iOS 应用的玻璃效果 UI
168 周安装
Vitest 测试框架完整指南:JavaScript/TypeScript 项目极速测试与配置教程
171 周安装
Next.js客户端组件与服务器操作Cookie设置模式详解 | 主题切换与Cookie横幅实现
170 周安装
Discord Webhook 使用指南:无需机器人,通过curl向频道发送消息和文件
169 周安装
DeepSeek API 使用指南:聊天、推理与代码生成,OpenAI 经济替代方案
171 周安装
iOS SwiftUI 开发模式与最佳实践 - 状态管理、视图组合、异步处理
45 周安装