{"dataset":{"id":"00000000-0000-0000-0000-000000000012","slug":"tailwind-best-practices","name":"Tailwind CSS best practices","description":"Source-linked guidance on Tailwind CSS v4 fundamentals: Vite installation, utility-first styling, theme variables, automatic content detection, and responsive breakpoints. Scoped to Tailwind CSS v4; not a general CSS corpus.","visibility":"public","version":1,"documentCount":5,"publisher":"Koskamo editorial","license":"Original summaries; linked sources retain their own terms.","reviewedAt":"2026-10-04T00:00:00.000Z","readOnly":true,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},"total":5,"documents":[{"title":"Responsive design with breakpoint variants","sourceUrl":"https://tailwindcss.com/docs/responsive-design","text":"Every utility class in Tailwind can be applied conditionally at different breakpoints: prefix the utility with the breakpoint name followed by a colon, as in w-16 md:w-32 lg:w-48. There are five breakpoints by default, inspired by common device resolutions — sm at 40rem (640px), md at 48rem (768px), lg at 64rem (1024px), xl at 80rem (1280px), and 2xl at 96rem (1536px) — each compiled to an @media (width >= ...) rule, and this works for every utility in the framework, even letter spacing or cursor styles. Tailwind is mobile-first: unprefixed utilities like uppercase apply at all screen sizes, while prefixed utilities like md:uppercase apply at that breakpoint and above. So target mobile with unprefixed utilities and override them at larger breakpoints, as in text-center sm:text-left; sm:text-center centers text only on screens 640px and wider, not on small screens. Styles applied by rules like md:flex stay applied at larger breakpoints by default. Scope: Tailwind CSS v4. Reviewed October 4, 2026.","id":"tailwind-best-practices:Responsive design with breakpoint variants","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Automatic content detection in v4","sourceUrl":"https://tailwindcss.com/docs/detecting-classes-in-source-files","text":"Tailwind works by scanning your project for utility classes and generating the CSS only for the classes you have actually used, which keeps your CSS as small as possible. It treats every source file as plain text rather than parsing it as code, looking for tokens that could be class names and discarding any that do not map to a known utility. Because of that, never construct class names dynamically with string concatenation or interpolation — text-{{ error ? 'red' : 'green' }}-600 will not generate text-red-600 — and map component props to complete, statically detectable class names instead. Tailwind scans every file in your project except files listed in .gitignore, node_modules, binary files like images, videos, or zip files, CSS files, and common package manager lock files. Register ignored paths explicitly with @source relative to the stylesheet, ignore specific paths with @source not, or disable automatic detection entirely with source(none) on the @import. Scope: Tailwind CSS v4. Reviewed October 4, 2026.","id":"tailwind-best-practices:Automatic content detection in v4","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Theme customization with @theme variables","sourceUrl":"https://tailwindcss.com/docs/theme","text":"Design tokens in Tailwind are stored in theme variables: special CSS variables defined with the @theme directive that influence which utility classes exist in your project. Defining @theme { --color-mint-500: oklch(0.72 0.11 178); } adds a new color, and Tailwind also generates regular CSS variables you can reference in arbitrary values or inline styles, like var(--color-mint-500). Use @theme instead of :root because theme variables instruct Tailwind to create new utility classes and must be defined top-level, not nested under other selectors or media queries; use :root for variables that should not map to utilities. Theme variables live in namespaces mapped to utility APIs: --color-* for color utilities like bg-red-500, --font-* for font-family utilities like font-sans, and --breakpoint-* for responsive variants like sm:* — defining --breakpoint-3xl: 120rem makes the 3xl:* variant available at viewports 120rem or wider. Scope: Tailwind CSS v4. Reviewed October 4, 2026.","id":"tailwind-best-practices:Theme customization with @theme variables","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Styling with utility classes","sourceUrl":"https://tailwindcss.com/docs/styling-with-utility-classes","text":"You style elements in Tailwind by combining many single-purpose utility classes directly in your markup — for example flex, p-6, max-w-sm, mx-auto, bg-white, rounded-xl, shadow-lg, size-12, gap-x-4, and text-xl. The documented benefits: designs come together faster because you never name classes or switch between HTML and CSS files; changes feel safer because adding or removing a class only ever affects that element; old projects are easier to maintain; code is portable because structure and styling live in the same place; and your CSS stops growing because utilities are so reusable. Unlike inline styles, utilities come from a predefined design system and can target states like hover or focus and media queries. Prefix any utility with a variant like hover:bg-sky-700 to apply styles only when the condition matches, and stack variants, as in disabled:hover:bg-sky-500. Scope: Tailwind CSS v4. Reviewed October 4, 2026.","id":"tailwind-best-practices:Styling with utility classes","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Installing Tailwind CSS as a Vite plugin","sourceUrl":"https://tailwindcss.com/docs/installation/using-vite","text":"Installing Tailwind CSS as a Vite plugin is documented as the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS. Create a project with npm create vite@latest if you do not have one, then install tailwindcss and @tailwindcss/vite via npm. Add the plugin to vite.config.ts: import tailwindcss from '@tailwindcss/vite' and register plugins: [tailwindcss()]. Add @import \"tailwindcss\"; to your CSS file, run your build process with npm run dev, and make sure the compiled CSS is included in the <head> of your page — your framework might handle that for you — then start using Tailwind's utility classes. Prefer this plugin over a PostCSS setup in new Vite projects; that preference is Koskamo editorial guidance. Scope: Tailwind CSS v4. Reviewed October 4, 2026.","id":"tailwind-best-practices:Installing Tailwind CSS as a Vite plugin","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"}]}