Without a named CSS framework, AI decides which one to use — and often picks one you didn’t want. Declaring “use Tailwind CSS” or “use Bootstrap 5” at the start of your prompt is the first step in any styling instruction.
How to Specify Frameworks
Name the framework and version
Avoid vague phrasing. Include the framework name and version when relevant.
Create a contact form using Bootstrap 5 with form validation and floating labels.Specify component libraries
A design system is a set of shared rules and reusable components that keeps appearance and interaction consistent across a product.[3]
A slide master offers a familiar comparison. Its colors and type styles correspond to design rules, while its common layouts correspond to reusable interface components. A product design system goes further by covering component states, usage conditions, guidance, and the way components are maintained.
The analogy has a limit: a slide master does not remove the presenter’s judgment, and a design system does not automatically guarantee a good or accessible interface. Teams still need to choose components for the situation and test them with users.[4]
When using an existing design system such as Material UI or Shadcn UI, state its name explicitly.
Create a dashboard layout using Material UI components with a sidebar, header, and main content area.Mention CSS architecture
For larger projects, naming a methodology keeps things consistent.
Use BEM methodology for CSS class naming with separate component-based stylesheets.Reference a known app’s style
Pointing to familiar products communicates direction quickly.
Create a settings page in the style of Apple's iOS interface.Understanding Tailwind’s Design System
When using Tailwind, knowing its system lets you give more precise instructions.
Color System
Tailwind colors use a numeric scale where higher numbers are darker (50 = lightest, 900 = darkest).
Create a button with a blue-600 background that changes to blue-700 on hover, with white text.| Number | Approximate tone |
|---|---|
| 50 | Near white |
| 100–300 | Light |
| 400–600 | Mid-range |
| 700–900 | Dark |
Spacing System
1 unit = 0.25rem (4px) by default.
Use p-4 for padding, mt-6 for margin-top, and gap-2 between flex items.| Class | Actual size |
|---|---|
| p-1 | 4px |
| p-2 | 8px |
| p-4 | 16px |
| p-6 | 24px |
| p-8 | 32px |
Typography Scale
From text-xs (smallest) to text-9xl (largest).
Use text-xl font-medium for headings and text-sm text-gray-600 for descriptions.Responsive Breakpoints
Tailwind uses mobile-first prefixes.
Create a grid with grid-cols-1 on mobile, md:grid-cols-2 on tablets, and lg:grid-cols-3 on desktop.| Prefix | Minimum width |
|---|---|
| sm: | 640px |
| md: | 768px |
| lg: | 1024px |
| xl: | 1280px |
| 2xl: | 1536px |
Common Styling Patterns
Dark mode support
Use Tailwind's dark: prefix to create a card component that supports light/dark mode switching.Custom color palette
Build components using this custom color palette:
- Primary: #6366F1 (indigo)
- Accent: #F59E0B (amber)
- Background: #F8FAFC
- Text: #1E293BGradient backgrounds
Create a hero section with a horizontal gradient from-purple-600 to-blue-600 as the background.See the references for the external specifications and background sources used on this page.[1][2]
References
- W3C Web Accessibility Initiative, WCAG 2 Overview
- MDN Web Docs, Learn web development
- Government Digital Service, GOV.UK Design System
- Government Digital Service, Accessibility strategy