Style applications with Tailwind CSS using @theme directives and CSS-first theming.
npx skills add https://github.com/azlekov/my-claude-code --skill tailwindcss-azlekov
Please help me install this Agent Skill. Skill: tailwindcss Source: https://github.com/azlekov/my-claude-code/tree/main/skills/tailwindcss Command: npx skills add https://github.com/azlekov/my-claude-code --skill tailwindcss-azlekov
This skill guides developers to style applications with Tailwind CSS using modern patterns and a CSS-first approach, ensuring consistency and up-to-date tooling.
Install Tailwind CSS in your project, configure PostCSS with the @tailwindcss/postcss plugin, enable the CSS-first theming approach using the @theme directive, and begin using color tokens and dark mode utilities immediately.
High-intent search queries and answers about installing and using this skill.
Tailwind CSS theming with the @theme directive uses a CSS-first approach to define design tokens as CSS variables. You configure PostCSS with the @tailwindcss/postcss plugin and manage tokens directly in your CSS for consistent application theming.
The best way to implement dark mode in Tailwind CSS is by defining perceptually uniform OKLCH color tokens within your @theme directive. This ensures accessible theme transitions and consistent color rendering across light and dark modes.
Container queries in Tailwind CSS enable responsive layouts driven by a container's size rather than the viewport. You apply container-based breakpoints to build robust UI components that adapt dynamically to their surrounding layout context.
Yes, Tailwind CSS supports OKLCH colors to create perceptually uniform design tokens. Using OKLCH within the @theme directive allows developers to build accessible themes with consistent visual lightness and saturation across different color spaces.
Yes, you need PostCSS configured with the @tailwindcss/postcss plugin to enable CSS-first theming. This setup processes the @theme directive and allows your project to immediately use dark mode utilities and color tokens.
Use container queries instead of standard breakpoints when building responsive layouts that need to adapt to their parent container size. Container-driven layouts provide robust UI behavior for reusable components placed in dynamically sized environments.
ehtbantonGenerate PostCSS configuration files with tailwindcss, autoprefixer, and cssnano plugins.
InteligentsensingsolutionsConfigure Tailwind CSS v4 design tokens, OKLCH palettes, and container queries.
djankiesConfigure Tailwind CSS v4 with CSS-first @import and @theme directives.
gouravsingh311Configure Tailwind v4 design tokens using CSS-first @theme directives.
