Agent skill · software engineering · aiskillstore
coding-with-tailiwnd
Use this skill when you need to code with tailwind css
Why this skill is useful
Provides specific Tailwind CSS directives and component structuring patterns that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Instructions Follow the rules below to code with tailwind css: Rules Create a seperate css file to style the component Use the tailwind apply directive to style the component Use the @layer components directive to style the component For tailwind 4.1 context, read the following docs: .claude/context/tailwind/tw-v4-theme-variable.md to get the design principles .claude/context/tailwind/tw-v4-custom-styles.md to get the custom styles .claude/context/tailwind/tw-v4-function-and-directives.md to get the functions and directives .claude/context/tailwind/tw-v4-detecting-classes-in-source-files.md to get the detecting classes in source files .claude/context/tailwind/tw-v4-upgrade-guide.md to get the upgrade guide Use nested classes in @layer components for styling parents and children elements Use @utility directives to add custom utilities to the component Use @variant directives to add custom variants to the component Create a new component in srs/components root directory Never touch the files in srs/components/ui directory
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/coding-with-tailiwnd