How does @theme differ from traditional configuration?

The @theme directive uses CSS custom properties (variables), making your theme values type-safe, natively accessible in the browser, and easier to manage within a standard CSS workflow.

Does this skill require a tailwind.config.js file?

No, this skill focuses on the Tailwind CSS v4.1 CSS-first approach, which allows for full configuration directly within your CSS files using specialized directives.

How do I define content sources in Tailwind v4.1?

In the CSS-first mode supported by this skill, you use the @source directive followed by a glob pattern to specify which files Tailwind should scan to generate the necessary utility classes.

Can I still use legacy plugins with this skill?

Yes, you can use the @plugin directive to load external Tailwind plugins and the @config directive if you need to maintain backward compatibility with an existing JS configuration.

Tailwind CSS v4.1 Core

Name: Tailwind CSS v4.1 Core
Author: fusengine

byfusengine

デザインツール

Implements a CSS-first approach for styling applications using Tailwind CSS v4.1 directives and theme variables.

概要

This skill equips Claude with the expertise to navigate the CSS-first architecture introduced in Tailwind CSS v4.1. By prioritizing directives like @theme, @source, and @utility over traditional JavaScript configuration files, it enables seamless theme customization, source management, and custom utility creation directly within CSS. It is particularly useful for modern frontend developers looking to leverage the latest Tailwind features for type-safe styles, improved performance, and cleaner project structures without the overhead of a tailwind.config.js file.

主な機能

0 GitHub stars
Dynamic content detection and file scanning using @source patterns
Custom utility and variant creation with @utility and @variant
Direct CSS-first configuration using Tailwind v4.1 directives
Legacy configuration support via @config for backward compatibility
Custom theme variable definition via @theme and CSS custom properties

ユースケース

Optimizing build performance by defining specific source file patterns and layer hierarchies
Migrating projects from tailwind.config.js to the modern v4.1 CSS-first architecture
Building design systems with type-safe CSS custom properties for enterprise applications

概要

主な機能

0 GitHub stars
Dynamic content detection and file scanning using @source patterns
Custom utility and variant creation with @utility and @variant
Direct CSS-first configuration using Tailwind v4.1 directives
Legacy configuration support via @config for backward compatibility
Custom theme variable definition via @theme and CSS custom properties

ユースケース

Optimizing build performance by defining specific source file patterns and layer hierarchies
Migrating projects from tailwind.config.js to the modern v4.1 CSS-first architecture
Building design systems with type-safe CSS custom properties for enterprise applications