tailwind-patterns

Name: tailwind-patterns
Availability: InStock
Author: TimeKast

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

Ready to run

npx skills add https://github.com/TimeKast/AgendaInteligente --skill tailwind-patterns-timekast

💬 Prompt for ChatGPT / Claude Chat▼

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.