Base Theme Styles

A modern dark UI base theme for Tailwind CSS using addBase().

Styled Elements

Layout

• html — global typography, smooth scrolling, dark background
• body — radial gradient background + font smoothing

Typography

• h1 → h6 — responsive heading hierarchy
• p — muted paragraph text with relaxed spacing
• small — secondary helper text
• strong — emphasized text
• mark — highlighted inline text
• blockquote — accented quote container
• code — inline code styling
• pre — code block container

Links

• a — animated underline hover links

Buttons

• button
• [type="button"]
• [type="submit"]
• [type="reset"]

Features:

• rounded corners
• hover lift animation
• shadow styling
• primary color system

Forms

• input
• select
• textarea
• label
• fieldset
• legend

Features:

• dark surface inputs
• focus glow ring
• rounded borders

Tables

• table
• thead
• th
• td

Features:

• dark table surface
• hoverable rows
• bordered layout

Lists

• ul
• ol
• li

Features:

• consistent spacing
• muted list text

Navigation

• nav

Features:

• sticky positioning
• blurred glass background
• border separator

Content Containers

• section
• article
• aside

Features:

• glass-style surfaces
• shadow elevation
• fade-in animation
• rounded corners

Media

• img

Features:

• responsive sizing
• rounded corners

Utility Elements

• hr — styled divider
• ::selection — custom text selection color
• ::-webkit-scrollbar* — custom scrollbar styling

Global Effects

• universal transitions on:
  • background-color
  • color
  • border-color
  • transform
  • box-shadow

Animations

• fadeIn — smooth upward fade entrance animation and on div elements

Theme Tokens

Colors

• --bg
• --surface
• --surface-hover
• --text
• --text-muted
• --primary
• --primary-hover
• --border

Other Tokens

• --radius
• --shadow
• --transition

Included UX Features

• Dark mode design system
• Smooth transitions
• Glassmorphism-inspired surfaces and another individual class
• Accessible spacing
• Modern typography scale
• Soft elevation shadows
• Animated interactions
• Consistent border radius system
• Used Grayscale Theme