coding-with-tailiwnd
Use this skill when you need to code with tailwind css
Best use case
coding-with-tailiwnd is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use this skill when you need to code with tailwind css
Teams using coding-with-tailiwnd should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/coding-with-tailiwnd/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How coding-with-tailiwnd Compares
| Feature / Agent | coding-with-tailiwnd | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use this skill when you need to code with tailwind css
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
Related Skills
rigorous-coding
Apply rigorous coding standards. Use when writing, implementing, or reviewing code.
write-coding-standards-from-file
Write a coding standards document for a project using the coding styles from the file(s) and/or folder(s) passed as arguments in the prompt.
stream-coding
Documentation-first development methodology. The goal is AI-ready documentation - when docs are clear enough, code generation becomes automatic. Triggers on "Build", "Create", "Implement", "Document", or "Spec out". Version 3.5 adds Phase 2.5 Adversarial Review and renames internal verification to Spec Gate (structural completeness). Clarity Gate is now a separate standalone tool for epistemic quality.
Coding Agent (bash-first)
Use **bash** (with optional background mode) for all coding agent work. Simple and effective.
copilot-coding-agent
GitHub Copilot Coding Agent automation. Apply the ai-copilot label to an issue → GitHub Actions auto-assigns Copilot via GraphQL → Copilot creates a Draft PR. One-click issue-to-PR pipeline.
cc-skill-coding-standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
no-hardcoding
Forbid hardcoded values in code. Use this when reviewing code, writing new features, or when magic numbers/strings are detected. Enforces constants, env variables, and config files.
global-coding-style
Maintain consistent code formatting, naming conventions, type safety, and automated code quality standards across PHP and TypeScript/JavaScript. Use this skill when writing or editing any PHP files (.php), TypeScript/JavaScript files (.ts, .tsx, .js, .jsx), when implementing type declarations and return types, when running code formatters (Laravel Pint, Ultracite) or linters, when running static analysis tools (Larastan), when naming variables, functions, classes, or files, when applying DRY principles, when removing dead code, or when preparing code for review or commit.
java-coding-standards
Java coding standards for Spring Boot services: naming, immutability, Optional usage, streams, exceptions, generics, and project layout.
cpp-coding-standards
C++ coding standards based on the C++ Core Guidelines (isocpp.github.io). Use when writing, reviewing, or refactoring C++ code to enforce modern, safe, and idiomatic practices.
OpenAI Codex CLI — AI Coding Agent in Your Terminal
You are an expert in OpenAI's Codex CLI, the open-source terminal-based coding agent that reads your codebase, generates and edits code, runs shell commands, and applies changes — all within your terminal. You help developers use Codex CLI for code generation, refactoring, debugging, and automation with configurable approval modes (suggest, auto-edit, full-auto) and sandboxed execution for safety.
Gemini CLI — Google's AI Coding Agent for the Terminal
You are an expert in Gemini CLI, Google's open-source terminal-based AI agent powered by Gemini models. You help developers use Gemini CLI for code generation, file editing, shell command execution, and multi-modal tasks (analyzing images, reading PDFs) — with Google's 1M+ token context window for understanding entire codebases at once and MCP tool integration for extending capabilities.