skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tailwind-patterns

Standardize Tailwind CSS v4 configuration with @theme tokens and @source exclusions.

Updated May 19, 2026
Search Tags:#design tokens#dark mode#container queries#tailwind css v4#css-native configuration#oxîde scanning
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill tailwind-patterns-timekast
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.agent/skills/tailwind-patterns
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill tailwind-patterns-timekast

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents Tailwind CSS v4 build crashes and inconsistent styling by standardizing modern configuration and responsive patterns.

Core Features & Use Cases

  • Tailwind v4 configuration guidance: Use CSS-native @theme tokens and modern defaults instead of legacy tailwind.config.js patterns.
  • Responsive styling strategy: Apply viewport breakpoints and container queries appropriately for page vs component responsiveness.
  • Stability safeguards for Tailwind v4 scanning: Exclude docs and .agent content with @source not to avoid Oxide parsing malformed class-like text in Markdown.

Quick Start

Ask the AI to generate Tailwind v4-ready CSS and component class patterns that include container-query usage and safe @source not exclusions for the .agent and docs directories.

Frequently Asked Questions about tailwind-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does Tailwind CSS v4 crash during Oxide scanning in my docs directory?▼

Tailwind CSS v4 crashes during Oxide scanning when parsing Markdown files containing malformed class-like text. Fix this by adding `@source not` exclusions for docs and `.agent` directories after your `@import` statement.

How do I set up Tailwind CSS v4 design tokens without a tailwind.config.js file?▼

Set up Tailwind CSS v4 design tokens by using CSS-native `@theme` blocks directly in your stylesheet. This replaces legacy `tailwind.config.js` patterns and applies modern theme token configurations natively in CSS.

When should I use container queries instead of viewport breakpoints in Tailwind CSS?▼

Use container queries for component-level responsiveness and viewport breakpoints for page-level layouts. Tailwind CSS v4 supports both, allowing you to isolate component styling from the viewport size for more predictable responsive behavior.

What is the best way to configure dark mode in Tailwind CSS v4?▼

The best way to configure dark mode in Tailwind CSS v4 is to follow standardized dark-mode conventions using mobile-first prefixes and CSS-native configuration, ensuring consistent theme switching without legacy JavaScript overrides.

How do I exclude non-source directories from Tailwind CSS v4 content scanning?▼

Exclude non-source directories from Tailwind CSS v4 content scanning by placing `@source not` declarations after your `@import` statement. This prevents Oxide from parsing CSS-like text in documentation or `.agent` directories.

Related Skills

Explore More Software Engineering Skills→
VaggelisKaVaggelisKa
2

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 in Expo apps.

Community
Intermediate
InteligentsensingsolutionsInteligentsensingsolutions
1

tailwind-patterns

Configure Tailwind CSS v4 design tokens, OKLCH palettes, and container queries.

Official
Intermediate
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
mohamed-g-shoaibmohamed-g-shoaib
2

tailwind-design-system

Standardize UI development with Tailwind CSS v4 design tokens and CSS-first theming.

Community
Advanced