tailwindcss
π―Skillfrom akornmeier/claude-config
|Rapidly style web applications with utility-first CSS classes, enabling responsive design and optimized production bundles.
Part of
akornmeier/claude-config(24 items)
Installation
npx astro add tailwindnpx tailwindcss init -pnpm run devSkill Details
Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development. Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility classes.
Overview
# Tailwind CSS Skill
Tailwind CSS is a utility-first CSS framework that enables rapid UI development by providing pre-built utility classes. It generates optimized CSS at build-time by scanning your project files, resulting in zero runtime overhead and minimal production bundles.
When to Use This Skill
Use this skill when:
- Building responsive layouts with mobile-first design
- Implementing dark mode and theme customization
- Creating custom design systems with consistent spacing, colors, and typography
- Styling React, Vue, Svelte, or any web framework components
- Prototyping interfaces with rapid visual feedback
- Building production applications with optimized CSS bundles
- Working with state-based styling (hover, focus, disabled, etc.)
- Creating complex layouts with Grid and Flexbox utilities
Core Concepts
Utility-First Approach
Tailwind provides low-level utility classes that you apply directly to HTML elements instead of writing custom CSS:
```html
Title
Title
```
Benefits:
- No CSS file switching - styles live with markup
- No naming conventions needed
- Automatic dead code elimination
- Consistent design tokens across team
- Fast iteration without CSS bloat
Build-Time Processing
Tailwind scans your source files at build-time and generates only the CSS classes you actually use:
```javascript
// Tailwind analyzes these files
content: [
'./src/*/.{js,jsx,ts,tsx}',
'./app/*/.{js,jsx,ts,tsx}',
'./components/*/.{js,jsx,ts,tsx}',
];
```
Result: Optimized production bundles with zero runtime overhead.
Installation & Setup
Modern Setup with Vite
Step 1: Install dependencies
```bash
npm install -D tailwindcss @tailwindcss/vite
# or
pnpm add -D tailwindcss @tailwindcss/vite
# or
yarn add -D tailwindcss @tailwindcss/vite
```
Step 2: Configure Vite
```javascript
// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [tailwindcss()],
});
```
Step 3: Import in CSS
```css
/ src/index.css /
@import 'tailwindcss';
```
Step 4: Reference stylesheet in HTML
```html
```
Framework-Specific Setup
Next.js (App Router):
```bash
npx create-next-app@latest --tailwind
```
Next.js (Manual):
```javascript
// tailwind.config.js
module.exports = {
content: ['./app/*/.{js,ts,jsx,tsx}', './components/*/.{js,ts,jsx,tsx}'],
};
```
React with Vite:
```bash
npm create vite@latest my-app -- --template react
npm install -D tailwindcss @tailwindcss/vite
```
Vue:
```bash
npm install -D tailwindcss @tailwindcss/vite
```
Svelte:
```bash
npm install -D tailwindcss @tailwindcss/vite
```
Astro:
```bash
npx astro add tailwind
```
PostCSS Setup (Alternative)
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
```javascript
// postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
```
Design System & Tokens
Default Design System
Tailwind includes a comprehensive default design system:
- Colors: 18 color palettes with 11 shades each (50-950)
- Spacing: Consistent scale from 0.25rem to 96rem
- Typography: Font sizes, weights, line heights
- Breakpoints: Mobile-first responsive system
- Shadows: Elevation system for depth
- Border radius: Rounded corners at different scales
Customizing Theme
Use the @theme directive in CSS:
```css
@import 'tailwindcss';
@theme {
/ Custom colors /
--color-brand-50: oklch(0.97 0.02 264);
--color-brand-500: oklch(0.55 0.22 264);
--color-brand-900: oklch(0.25 0.15 264);
/ Custom fonts /
--font-display: 'Satoshi', 'Inter', sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
/ Custom spacing /
--spacing-18: calc(var(--spacing) * 18);
--spacing-navbar: 4.5rem;
/ Custom breakpoints /
--breakpoint-3xl: 120rem;
--breakpoint-4xl: 160rem;
/ Custom shadows /
--shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
}
```
Usage:
```html
```
Color System
Using default colors:
```html
Text
```
Color scale:
- 50: Lightest
- 100-400: Light variations
- 500: Base color
- 600-800: Dark variations
- 950: Darkest
Color opacity modifiers:
```html
```
Utility Classes
Layout
Display:
```html
```
Flexbox:
```html
```
Grid:
```html
```
Positioning:
```html
```
Spacing
Padding & Margin:
```html
```
Gap (Flexbox/Grid):
```html
```
Typography
Font Size:
```html
Extra small
Small
Base (16px)
Large
Extra large
2XL
Heading
```
Font Weight:
```html
Light (300)
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
```
Text Alignment:
```html
Left aligned
Center aligned
Right aligned
Justified
```
Line Height:
```html
Tight line height
Normal line height
Relaxed line height
```
Combining font utilities:
```html
Font size 4xl with tight line-height
```
Colors & Backgrounds
Background colors:
```html
```
Text colors:
```html
Dark text
Blue text
```
Borders
```html
```
Shadows
```html
```
Responsive Design
Mobile-First Breakpoints
Tailwind uses a mobile-first approach. Base styles apply to all screen sizes, then use breakpoint prefixes to override at larger sizes:
Breakpoints:
sm:- 640px and upmd:- 768px and uplg:- 1024px and upxl:- 1280px and up2xl:- 1536px and up
Example:
```html
Responsive heading
```
Custom Breakpoints
```css
@theme {
--breakpoint-3xl: 120rem;
--breakpoint-tablet: 48rem;
}
```
```html
```
Max-width Queries
```html
```
Container Queries
Style elements based on parent container width:
```html
```
Interactive States
Hover States
```html
```
Focus States
```html
Accessible button
```
Active States
```html
```
Disabled States
```html
Disabled button
```
Form States
```html
```
Group Hover (Parent State)
```html
Text changes when parent is hovered
```
Peer State (Sibling State)
```html
Invalid email
```
Dark Mode
Setup Dark Mode
Media query approach (automatic):
```html
Auto switches based on system preference
```
Class-based approach (manual toggle):
```javascript
// Add .dark class to element
document.documentElement.classList.toggle('dark');
```
Dark Mode Utilities
```html
Text
Content adapts to themeDark mode card
```
Dark Mode Toggle Implementation
```javascript
// Store preference
function toggleDarkMode() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
// Initialize on load
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
}
```
Arbitrary Values
Use square brackets for one-off custom values:
Pixel values:
```html
Custom font size
```
Colors:
```html
```
CSS variables:
```html
```
Complex values:
```html
```
Transitions & Animations
Transitions
```html
```
Transforms
```html
```
Animations
```html
```
Custom Animations
```css
@theme {
--animate-slide-in: slide-in 0.5s ease-out;
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
```
```html
```
Advanced Patterns
Custom Utilities
Create reusable utility classes:
```css
@utility content-auto {
content-visibility: auto;
}
@utility tab-* {
tab-size: var(--tab-size-*);
}
```
```html
Custom tab size
```
Custom Variants
```css
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
@custom-variant aria-checked (&[aria-checked="true"]);
```
```html
```
Layer Organization
```css
@layer base {
h1 {
@apply text-4xl font-bold;
}
body {
@apply bg-white text-gray-900;
}
}
@layer components {
.btn {
@apply px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-700;
}
.card {
@apply bg-white rounded-lg shadow-md p-6;
}
}
```
Apply Directive
Extract repeated utilities into CSS classes:
```css
.btn-primary {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
.input-field {
@apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
}
```
Component Examples
Button Component
```html
class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed"
>
Click me
class="bg-white hover:bg-gray-50 border-2 border-gray-300 text-gray-700 font-semibold px-6 py-3 rounded-lg"
>
Secondary
```
Card Component
```html
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden"
>
Card description text goes here Learn More Card Title
```
Form Component
```html
Email type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" placeholder="you@example.com" />
Password type="password" id="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 invalid:border-red-500 dark:bg-gray-700 dark:text-white" />
type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-colors"
>
Sign In
```
Navigation Component
```html
```
Grid Layout
```html
```
Best Practices
1. Use Consistent Spacing Scale
```html
```
2. Leverage Design Tokens
```html
```
3. Mobile-First Responsive Design
```html
```
4. Component Extraction
```javascript
// React component with Tailwind
function Button({ children, variant = 'primary' }) {
const baseClasses = 'font-semibold px-6 py-3 rounded-lg transition-colors';
const variants = {
primary: 'bg-blue-600 hover:bg-blue-700 text-white',
secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
};
return ;
}
```
5. Use @apply for Repeated Patterns
```css
/ Only use @apply for truly repeated patterns /
@layer components {
.card {
@apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
}
}
```
6. Accessibility First
```html
Accessible link
```
7. Performance Optimization
- Use PurgeCSS in production (automatic with modern setup)
- Avoid dynamic class names:
class={text-${color}-500}won't work - Use safelist for dynamic classes if needed
8. Dark Mode Consistency
```html
class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700"
>
Complete dark mode support
```
Common Patterns
Centering Content
```html
```
Full-Width Container with Max Width
```html
```
Aspect Ratio Boxes
```html
```
Truncate Text
```html
Long text that will be truncated with ellipsis...
Long text that will be truncated after 3 lines with ellipsis...
```
Smooth Scrolling
```html
```
Troubleshooting
Classes Not Working
- Check content configuration:
```javascript
// tailwind.config.js
content: [
'./src/*/.{js,jsx,ts,tsx}',
// Add all file paths where you use Tailwind
];
```
- Dynamic classes won't work:
```javascript
// β Won't work
const color = 'blue'
// β
Works ``` ```css / Use !important sparingly / ``` ```bash # Clear cache and rebuild rm -rf .next node_modules/.cache npm run dev ``` Install official extension: ```json { "tailwindCSS.experimental.classRegex": [["cva\\(([^)])\\)", "[\"' } ```Build Issues
IntelliSense Not Working
.vscode/settings.json:]([^\"']).*?[\"'`]"]]
Resources
- Official Documentation: https://tailwindcss.com/docs
- Tailwind UI Components: https://tailwindui.com
- Headless UI (unstyled components): https://headlessui.com
- Tailwind Play (online playground): https://play.tailwindcss.com
- Color Palette Generator: https://uicolors.app
- Community Components: https://tailwindcomponents.com
Framework Integration Examples
React
```jsx
export function Card({ title, description }) {
return (
{description} {title}
);
}
```
Vue
```vue
{{ description }} {{ title }}
```
Svelte
```svelte
{description}{title}
```
Implementation Checklist
When implementing Tailwind CSS:
- [ ] Install
tailwindcssand framework-specific plugin - [ ] Configure build tool (Vite/PostCSS/CLI)
- [ ] Set up content paths in configuration
- [ ] Import Tailwind in CSS file
- [ ] Configure custom theme tokens (if needed)
- [ ] Set up dark mode strategy
- [ ] Install VS Code IntelliSense extension
- [ ] Create reusable component patterns
- [ ] Implement responsive breakpoints
- [ ] Add accessibility focus states
- [ ] Test dark mode across all components
- [ ] Optimize for production build
- [ ] Document custom utilities and components
More from this repository10
Enables interactive PostgreSQL database management through psql, executing queries, scripting, and administering database operations from the command line.
Provides customizable, accessible React UI components using Tailwind CSS that can be directly copied and modified in your project.
Automates OpenSpec change implementation by parsing tasks, filtering phases, and creating PRs using subagent-driven development.
Enables seamless S3-compatible object storage on Cloudflare's global network with zero egress fees, supporting file uploads, downloads, and migrations.
Securely implement authentication and authorization with a framework-agnostic TypeScript library supporting email/password, OAuth, 2FA, and advanced auth features.
Enables comprehensive MongoDB database management, from schema design and querying to deployment, performance optimization, and secure integration across multiple platforms and languages.
Guides developers in building Vue 3 NuxtUI components using strict Test-Driven Development (TDD) methodology with atomic design principles and Storybook interaction tests.
Accelerates monorepo development by enabling intelligent caching, parallel task execution, and efficient build performance across JavaScript and TypeScript projects.
Generates configurable AI skills with customizable parameters and templates for Claude-based applications.
Translates product requirements into comprehensive UX specifications by systematically analyzing user mental models, information architecture, and interaction design.