skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

tailwind

Configure Tailwind CSS v4 with the Rango router Document component and Vite CSS imports.

Updated Nov 7, 2025
Search Tags:#tailwind css#vite#dark mode#stylesheet#react server components#rango#css setup
One-click install
npx skills add https://github.com/rangojs/rango --skill tailwind-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/tailwind
Command: npx skills add https://github.com/rangojs/rango --skill tailwind-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite.

What problem does it solve? Setting up Tailwind CSS v4 in a Rango app requires wiring the Vite plugin, a CSS entry point, and the Document component correctly, and mistakes cause styles to not apply or flash unstyled content during SSR streaming. ## Core Features & Use Cases - Vite Plugin Setup: Install tailwindcss and @tailwindcss/vite, register the plugin, and create the CSS entry point with @import "tailwindcss". - Document Component Integration: Import CSS with the ?url suffix and render preload and stylesheet links with the precedence prop so React 19 manages, de-duplicates, and loads styles before paint. - Theme and Dark Mode: Customize design tokens via CSS @theme, and combine with the Rango theme system so Tailwind's dark: variant responds to the class attribute. - Use Case: When adding Tailwind to a Rango app or debugging classes that are not generated, follow the steps to wire the Vite plugin, index.css, and Document component with hashed stylesheet URLs. ## Quick Start Set up Tailwind CSS v4 in my Rango app by configuring the Vite plugin and linking the stylesheet in the Document component.

Frequently Asked Questions about tailwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Tailwind CSS v4 with the Rango router?▼

Install tailwindcss and @tailwindcss/vite, add the tailwindcss() plugin to vite.config.ts, and create src/index.css with @import "tailwindcss". Then import it with ?url in the Document component and render preload and stylesheet link tags with a precedence prop.

Why are my Tailwind classes not being applied in a Rango app?▼

Classes fail when the stylesheet is not linked in the Document component or when a bare side-effect CSS import is used instead of the ?url import. Use import styles from "./index.css?url" and render a link rel="stylesheet" with the precedence prop.

Does Tailwind v4 need a tailwind.config.js file?▼

No, Tailwind v4 does not require a tailwind.config.js file. Theme customization such as fonts, colors, and breakpoints is done directly in CSS using the @theme directive, and the @tailwindcss/vite plugin handles content detection automatically.

How do I enable dark mode with Tailwind in Rango?▼

Configure the Rango router with theme: { attribute: "class" } so the theme system toggles a class attribute. Tailwind's dark: variant reads that class, letting you write utilities like dark:bg-slate-900 without extra configuration.

Why use the ?url import instead of a regular CSS import?▼

The ?url suffix tells Vite to return the processed CSS file's hashed URL instead of injecting styles as a side effect. Bare side-effect imports do not work reliably with SSR streaming, while the ?url form works in both development and production.

Related Skills

Explore More Software Engineering Skills→
michelvemichelve
1

tailwindcss

Style React components with Tailwind CSS v4 utility classes and responsive design.

Community
Intermediate
kaxuna1kaxuna1

frontend-design

Style React components with Tailwind utility classes and design tokens.

Community
Basic
legioncodeinclegioncodeinc
84

typography-font-stinger

Implements web font loading strategies, variable font subsetting, and fluid clamp() type scales.

Official
Advanced
GatsbyhateyouGatsbyhateyou

retro-css-architecture

Organize CSS for 8-bit components with custom properties and pixel fonts.

Community
Basic