Styling & Frameworks

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

When using a design system, state it 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: #1E293B

Gradient 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

1. W3C Web Accessibility Initiative, WCAG 2 Overview
2. MDN Web Docs, Learn web development