# Tailwind CSS

## Docs

- [Custom Utilities](https://mintlify.wiki/tailwindlabs/tailwindcss/advanced/custom-utilities.md): Create custom utility classes with the @utility directive
- [Custom Variants](https://mintlify.wiki/tailwindlabs/tailwindcss/advanced/custom-variants.md): Create custom variants with @custom-variant and @variant directives
- [CSS Functions & Directives](https://mintlify.wiki/tailwindlabs/tailwindcss/advanced/functions-directives.md): Use CSS functions like theme() and directives like @apply, @theme, and @source
- [Important Modifier](https://mintlify.wiki/tailwindlabs/tailwindcss/advanced/important-modifier.md): Use the ! modifier to make utilities important and override other styles
- [Advanced Theming](https://mintlify.wiki/tailwindlabs/tailwindcss/advanced/theming.md): Create dynamic themes with CSS variables, @theme directive, and theme switching
- [compile() and compileAst()](https://mintlify.wiki/tailwindlabs/tailwindcss/api/compile.md): Core compilation functions for processing Tailwind CSS
- [Config Types and Configuration API](https://mintlify.wiki/tailwindlabs/tailwindcss/api/configuration.md): TypeScript types and interfaces for Tailwind CSS configuration
- [@source](https://mintlify.wiki/tailwindlabs/tailwindcss/api/css/at-source.md): Specify content source paths for Tailwind to scan for class names
- [@theme](https://mintlify.wiki/tailwindlabs/tailwindcss/api/css/at-theme.md): Define custom CSS variables for your design system with the @theme directive
- [@utility](https://mintlify.wiki/tailwindlabs/tailwindcss/api/css/at-utility.md): Create custom utility classes with the @utility directive
- [@variant & @custom-variant](https://mintlify.wiki/tailwindlabs/tailwindcss/api/css/at-variant.md): Create custom variants to apply styles conditionally
- [theme()](https://mintlify.wiki/tailwindlabs/tailwindcss/api/css/theme-function.md): Reference theme variables in your CSS with the theme() function
- [DesignSystem API](https://mintlify.wiki/tailwindlabs/tailwindcss/api/design-system.md): Core design system interface for Tailwind CSS utilities and variants
- [Base & Components](https://mintlify.wiki/tailwindlabs/tailwindcss/api/plugin-api/add-base.md): Add global base styles and reusable component classes with addBase() and addComponents()
- [Utilities](https://mintlify.wiki/tailwindlabs/tailwindcss/api/plugin-api/add-utilities.md): Register static and dynamic utility classes with addUtilities() and matchUtilities()
- [Variants](https://mintlify.wiki/tailwindlabs/tailwindcss/api/plugin-api/add-variants.md): Create custom variants with addVariant() and matchVariant() to modify utilities based on state or conditions
- [Plugin System Overview](https://mintlify.wiki/tailwindlabs/tailwindcss/api/plugin-api/overview.md): Create custom Tailwind CSS plugins to extend the framework with utilities, variants, and base styles
- [Theme & Config Functions](https://mintlify.wiki/tailwindlabs/tailwindcss/api/plugin-api/theme-function.md): Access theme values and configuration with theme() and config() methods
- [PostCSS Plugin](https://mintlify.wiki/tailwindlabs/tailwindcss/api/postcss-plugin.md): Complete API reference for the @tailwindcss/postcss plugin
- [Vite Plugin](https://mintlify.wiki/tailwindlabs/tailwindcss/api/vite-plugin.md): Complete API reference for the @tailwindcss/vite plugin
- [Webpack Loader](https://mintlify.wiki/tailwindlabs/tailwindcss/api/webpack-plugin.md): Complete API reference for the @tailwindcss/webpack loader
- [Adding Custom Styles](https://mintlify.wiki/tailwindlabs/tailwindcss/core-concepts/adding-custom-styles.md): Learn how to extend Tailwind with custom utilities, components, and CSS alongside the framework.
- [Dark Mode](https://mintlify.wiki/tailwindlabs/tailwindcss/core-concepts/dark-mode.md): Learn how to implement dark mode in your Tailwind projects using class-based, media query, or custom strategies.
- [Responsive Design](https://mintlify.wiki/tailwindlabs/tailwindcss/core-concepts/responsive-design.md): Build fully responsive interfaces with Tailwind's mobile-first breakpoint system.
- [Reusing Styles](https://mintlify.wiki/tailwindlabs/tailwindcss/core-concepts/reusing-styles.md): Learn effective patterns for managing duplication and reusing styles in Tailwind CSS projects.
- [Utility-First Fundamentals](https://mintlify.wiki/tailwindlabs/tailwindcss/core-concepts/utility-first.md): Learn how Tailwind's utility-first approach helps you build modern websites without leaving your HTML.
- [Color Customization](https://mintlify.wiki/tailwindlabs/tailwindcss/customization/colors.md): Customize color palettes using modern color spaces and the @theme directive
- [Configuration File](https://mintlify.wiki/tailwindlabs/tailwindcss/customization/configuration.md): Set up and configure your Tailwind CSS project with JavaScript configuration files
- [Plugins](https://mintlify.wiki/tailwindlabs/tailwindcss/customization/plugins.md): Create and use plugins to extend Tailwind CSS functionality
- [Spacing Scale](https://mintlify.wiki/tailwindlabs/tailwindcss/customization/spacing.md): Customize spacing values for padding, margin, gap, and more
- [Theme Customization](https://mintlify.wiki/tailwindlabs/tailwindcss/customization/theme.md): Customize your design system using the @theme directive and theme configuration
- [Variants](https://mintlify.wiki/tailwindlabs/tailwindcss/customization/variants.md): Customize and extend variants for conditional styling
- [Editor Setup](https://mintlify.wiki/tailwindlabs/tailwindcss/editor-setup.md): Configure your editor for the best Tailwind CSS development experience with IntelliSense and plugins
- [Installation](https://mintlify.wiki/tailwindlabs/tailwindcss/installation.md): Install Tailwind CSS in your project using npm, yarn, or pnpm
- [CLI](https://mintlify.wiki/tailwindlabs/tailwindcss/integration/cli.md): Use the Tailwind CSS CLI to build and watch your stylesheets
- [PostCSS Plugin](https://mintlify.wiki/tailwindlabs/tailwindcss/integration/postcss.md): Use Tailwind CSS as a PostCSS plugin in any build tool
- [Vite Plugin](https://mintlify.wiki/tailwindlabs/tailwindcss/integration/vite.md): Integrate Tailwind CSS into your Vite projects
- [Webpack Loader](https://mintlify.wiki/tailwindlabs/tailwindcss/integration/webpack.md): Use Tailwind CSS with webpack via a custom loader
- [Introduction to Tailwind CSS](https://mintlify.wiki/tailwindlabs/tailwindcss/introduction.md): A utility-first CSS framework for rapidly building custom user interfaces
- [Quickstart Guide](https://mintlify.wiki/tailwindlabs/tailwindcss/quickstart.md): Get started with Tailwind CSS in minutes and build your first component with utility-first styling
- [Automated Upgrade Tool](https://mintlify.wiki/tailwindlabs/tailwindcss/upgrading/codemods.md): Use the @tailwindcss/upgrade package to automatically migrate your project from v3 to v4
- [Upgrade Guide](https://mintlify.wiki/tailwindlabs/tailwindcss/upgrading/upgrade-guide.md): Learn how to upgrade to the latest version of Tailwind CSS
- [Migrating from v3 to v4](https://mintlify.wiki/tailwindlabs/tailwindcss/upgrading/v3-to-v4.md): Comprehensive guide for migrating from Tailwind CSS v3 to v4, including all breaking changes and migration patterns