llms.txt is an open proposal for a short Markdown file that lists a project's key docs and links, so AI tools can find them without crawling every page.

Where should llms.txt be deployed?

At /llms.txt on your documentation site, or in your repository root. Tools read it when they fetch it; nothing loads it automatically.

# Tailwind CSS v4 & CSS-First Styling Specialist

> Modern Tailwind CSS v4 conventions. Enforces CSS-first @theme configuration, zero tailwind.config.js, and strict class ordering.

## Quick Reference

- **Framework**: Tailwind CSS v4 / React / Next.js

- **Language**: CSS / TypeScript

- **Styling & UI**: Tailwind CSS v4

- **Database / Persistence**: None / UI Only

- **Architectural Philosophy**: modern

## Core Architectural Invariants

- **Flat & Pragmatic Layout**: Keep directory nesting minimal (max 2-3 levels) to avoid navigation friction.

- **Accessible UI by Default**: Enforce semantic HTML, keyboard navigability, and proper ARIA roles.

- **Self-Documenting Naming**: Expressive function and variable names over verbose redundant comments.

## Operational Guardrails & Prohibited Patterns

- **Inspect Before Acting**: Always read and understand existing code and imports before suggesting changes.

- **Minimal Surgical Diffs**: Touch only lines relevant to prompt. Preserve existing comments and formatting.

- **Concise & Direct Tone**: Skip conversational pleasantries. Deliver focused diffs and a short rationale.

## Mandatory Project Directives

- Banned: Do not suggest tailwind.config.js; Tailwind v4 is pure CSS-configured.

- Prefer CSS custom properties within @theme for dynamic theming.

## Implementation Reference

### Preferred Patterns

```typescript

@import "tailwindcss";

@theme {

--color-primary: #ea580c;

--font-mono: "Geist Mono", monospace;

}

```

### Discouraged Anti-Patterns

```typescript

// Discouraged in v4: Legacy JS config

module.exports = {

theme: { extend: { colors: { primary: "#ea580c" } } }

};

```

## Verification Commands & Workflows

1. Define all design tokens, font families, and brand colors inside globals.css using the @theme block.

2. Never create or edit legacy tailwind.config.js or tailwind.config.ts files.

3. Order utility classes logically: layout -> spacing -> typography -> visual -> interactive.

4. Ensure sufficient contrast ratios and focus ring visibility for interactive elements.

## Context Documents & Specs

- [System Architecture](ARCHITECTURE.md): Authoritative system design, data flows, and state machine invariants.

- [AI Multi-Agent Spec](AGENTS.md): Universal specification for autonomous coding agent operations.

Frontend · Any LLM tool that fetches it

Tailwind CSS v4 llms.txt

An llms.txt for a Tailwind CSS v4 project: a short Markdown map of what it is and where the key docs and code live.

Path: llms.txt
Loads: Fetched on request
Format: Markdown index (.txt)
Used by: Any LLM tool that fetches it

All llms.txt presets and how llms.txt works

What this file tells the agent

An llms.txt gives language models and agents a short Markdown map of your Tailwind CSS v4 project: what it is and where the key docs and code live, so a tool that fetches it can go straight to the right files.

Configure themes directly in globals.css using `@theme` and `@import 'tailwindcss';`.
Never generate or modify legacy `tailwind.config.js` or `tailwind.config.ts` files.
Use CSS custom properties for dynamic color palettes.
Enforce consistent utility ordering: layout -> spacing -> typography -> background -> borders -> interactivity.

Code to avoid, and what to write instead

The rule steers the agent away from the left and toward the right.

avoid

// Discouraged in v4: Obsolete tailwind.config.js
module.exports = {
  theme: {
    extend: { colors: { brand: "#f97316" } }
  }
};

write instead

@import "tailwindcss";

@theme {
  --color-brand-primary: #f97316;
  --font-display: "Geist Sans", sans-serif;
}

Install it in one command

01
Go to your project root
The file goes at llms.txt, relative to the root.
02
Download the file
Run the command on the right. It downloads this preset and writes the file.
03
Make sure it gets used
Nothing loads llms.txt automatically. Serve it at your site root, or point agents to it from CLAUDE.md or AGENTS.md.

$ curl -fsSL "https://www.devscratchpad.tech/api/raw/llms-txt/tailwind-v4" -o "llms.txt"

writes llms.txt

path

llms.txt

To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.

More for Tailwind CSS v4

Other formats

Other llms.txt presets

Questions

What is llms.txt?: llms.txt is an open proposal for a short Markdown file that lists a project's key docs and links, so AI tools can find them without crawling every page.
Where should llms.txt be deployed?: At /llms.txt on your documentation site, or in your repository root. Tools read it when they fetch it; nothing loads it automatically.

Target Standard & File Format

Identity & Activation Rules

Technology Stack Context

Engineering Philosophy

Architectural & Code Quality Conventions

Agent Behavioral Guardrails

Step-by-Step Workflow Procedures

Target File Location