Tailwind CSS Documentation Website

repository·main·Indexed 14 days ago

https://github.com/tailwindlabs/tailwindcss.com

Source code for the official Tailwind CSS documentation website, built with Next.js. Includes guidelines on trademark usage, brand asset downloads, and technical guides for Headless UI components, Heroicons v2.0, and Tailwind Play.

Tokens: 225.6K
Snippets: 1.1K
Records: 1.2K
Agent score: 100%

What's inside tailwindcss.com

Understand the Headless UI philosophy and design goals
main
Headless UI v1.0 provides fully accessible, framework-agnostic components for React and Vue. The library focuses on providing robust, unstyled components that handle complex interactions like focus management, nested modals, and keyboard navigation. It supports patterns like Menu, Listbox, Switch, Disclosure, Dialog, Popover, and Radio Group, ensuring they work correctly even in complex nested scenarios (e.g., a dropdown inside a modal). The API is stable and committed to long-term support.
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/building-react-and-vue-support-for-tailwind-ui/index.mdx#understand-the-headless-ui-philosophy-and-design-goals-2
Install and use the Studio agency template
main
Studio is a beautiful agency website template built with Next.js, MDX, and Tailwind CSS. It uses the Next.js App Router and is designed for agencies that focus on engineering or non-design work. The template includes pre-built animations, a case study workflow, and a blog workflow. It is available as a one-time purchase via the Tailwind UI all-access license.
```
# Studio is a paid template available at:
# https://tailwindui.com/templates/studio
# Purchase via Tailwind UI all-access license
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/2023-08-07-meet-studio-our-new-agency-template/index.mdx#install-and-use-the-studio-agency-template
Understand what Preflight does
main
Preflight is an opinionated set of base styles built on top of modern-normalize that smooths over cross-browser inconsistencies. When you import tailwindcss, Preflight is automatically injected into the base layer. It resets margins, border styles, headings, and lists to ensure consistent behavior across browsers and prevents accidental reliance on user-agent styles.
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/preflight.mdx#understand-what-preflight-does
Understand the Headless UI philosophy and design goals
main
Headless UI is a set of completely unstyled, fully accessible UI components designed to work seamlessly with Tailwind CSS. Its core philosophy is to separate behavior from design: it provides the complex logic for keyboard navigation, focus management, and accessibility, while leaving all markup and styling entirely to the user via Tailwind utility classes. This ensures that Tailwind UI examples remain easy to customize and adapt without being locked into a specific design system.
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/building-react-and-vue-support-for-tailwind-ui/index.mdx#understand-the-headless-ui-philosophy-and-design-goals
Hide outlines for accessibility with outline-hidden
main
Use the outline-hidden utility to hide the default browser outline on focused elements while preserving the outline in forced colors mode (e.g., for high contrast users). This is the recommended approach for custom focus styling to maintain accessibility.
When using outline-hidden, it is highly recommended to apply your own focus styling (e.g., using focus:ring or focus:outline-*) to ensure the element remains visibly focused.
```
<input
  type="text"
  placeholder="Your full name"
  class="focus:outline-hidden focus:ring-2 focus:ring-indigo-500"
/>


<input
  type="text"
  placeholder="Your full name"
  class="focus:outline-hidden focus:outline-2 focus:outline-indigo-500"
/>
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/outline-style.mdx#hide-outlines-for-accessibility-with-outline-hidden
Upgrade to Tailwind CSS v3.3
main
Upgrade your project to Tailwind CSS v3.3 by installing the latest version from npm. This release includes an extended color palette with 950 shades, ESM and TypeScript configuration support, logical properties for RTL layouts, and new utilities for line-clamp, gradients, and more.
To upgrade, run the following command:
```
npm install -D tailwindcss@latest
```
You can also try out the new features immediately in your browser using Tailwind Play.
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/tailwindcss-v3-3-3/index.mdx#upgrade-to-tailwind-css-v3-3
Use dynamic utility values without configuration
main
Tailwind CSS v4.0 allows utilities to accept arbitrary values dynamically without configuration or arbitrary value syntax. This applies to grid columns, spacing utilities, and custom data attributes.
- Grid columns: Use any number directly (e.g., grid-cols-15).
- Data attributes: Target custom boolean data attributes directly (e.g., data-current:opacity-100).
- Spacing: Utilities like px-*, mt-*, w-*, h-* accept any integer value derived from the --spacing CSS variable.
The upgrade tool can automatically simplify arbitrary values that are no longer needed.
```

<div class="grid grid-cols-15">
  
</div>


<div data-current class="opacity-75 data-current:opacity-100">
  
</div>


<div class="mt-8 w-17 pr-29">
  
</div>
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/tailwindcss-v4/index.mdx#use-dynamic-utility-values-without-configuration
Remove box shadows and rings
main
Use shadow-none to remove standard box shadows, inset-shadow-none for inset shadows, ring-0 to remove rings, and inset-ring-0 to remove inset rings. These utilities are useful for overriding previous shadow or ring styles.
```

<div class="shadow-none"></div>


<div class="ring-0"></div>
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/box-shadow.mdx#remove-box-shadows-and-rings
Set minimum inline size with min-inline utilities
main
Use min-inline-* utilities to set the minimum inline size of an element. These utilities map to the CSS min-inline-size property and support spacing scale numbers, fractions, container scale breakpoints, viewport units, and arbitrary values.
Spacing scale numbers: Use min-inline-<number> (e.g., min-inline-24, min-inline-64) to set a fixed minimum inline size based on the spacing scale.
Fractions: Use min-inline-<fraction> (e.g., min-inline-1/2, min-inline-2/5) to set a percentage-based minimum inline size.
Container scale: Use min-inline-<size> (e.g., min-inline-xs, min-inline-lg) to set a fixed minimum inline size based on the container scale breakpoints.
Viewport units: Use min-inline-full (100%), min-inline-screen (100vw), min-inline-dvw (100dvw), min-inline-lvw (100lvw), min-inline-lvh (100lvh), min-inline-svw (100svw), or min-inline-svh (100svh).
Special values: Use min-inline-auto, min-inline-min (min-content), min-inline-max (max-content), or min-inline-fit (fit-content).
Custom values: Use arbitrary values like min-inline-[220px] or custom CSS variables like min-inline-[var(--my-size)].
```
<div class="min-inline-80">Minimum inline size of 80 (spacing scale)</div>
<div class="min-inline-1/2">Minimum inline size of 50%</div>
<div class="min-inline-lg">Minimum inline size of 32rem (container scale)</div>
<div class="min-inline-screen">Minimum inline size of 100vw</div>
<div class="min-inline-[220px]">Minimum inline size of 220px (arbitrary)</div>
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/min-inline-size.mdx#set-minimum-inline-size-with-min-inline-utilities
Style based on forced-colors mode
main
Use the new forced-colors variant to apply styles specifically when the user's operating system is in forced colors mode (high contrast). This helps ensure accessibility for users who rely on high-contrast themes. Use forced-colors:* prefix to target this state.
```

<div class="forced-colors:border-white">Content</div>
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/blog/tailwindcss-v3-4/index.mdx#style-based-on-forced-colors-mode
Apply responsive contrast filters
main
You can apply contrast filters responsively by combining contrast-* utilities with responsive prefixes (e.g., sm:, md:, lg:). This allows you to change the contrast level based on the viewport size.
Example: Apply contrast-125 by default and contrast-150 on medium screens and up.
```

<img class="contrast-125 md:contrast-150" src="/img/mountains.jpg" />
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-contrast.mdx#apply-responsive-contrast-filters
Control flex item shrinking with shrink utilities
main
Use the shrink utility class to allow a flex item to shrink if the container is too small. By default, flex items can shrink, but you can explicitly apply shrink to ensure this behavior or use shrink-0 to prevent shrinking entirely.
Available classes:
- shrink: Sets flex-shrink: 1 (allows shrinking).
- shrink-<number>: Sets flex-shrink to a specific number (e.g., shrink-2).
- shrink-[<value>]: Sets flex-shrink to an arbitrary value using bracket syntax (e.g., shrink-[0.5]).
- shrink-(<custom-property>): Sets flex-shrink to a CSS variable value (e.g., shrink-(--my-var)).
Preventing shrinking: To ensure a flex item maintains its size and does not shrink, use shrink-0.
Responsive design: You can apply responsive modifiers to control shrinking behavior at different breakpoints (e.g., md:shrink-0 to prevent shrinking on medium screens and larger).
```

<div class="flex">
  <div class="w-14 flex-none">01</div>
  <div class="w-64 shrink">02</div>
  <div class="w-14 flex-none">03</div>
</div>


<div class="flex">
  <div class="flex-1">01</div>
  <div class="w-32 shrink-0">02</div>
  <div class="flex-1">03</div>
</div>
```
https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex-shrink.mdx#control-flex-item-shrinking-with-shrink-utilities