Skip to main content

Styles

This styles page shows an overview of different elements and how they are styled.

It's a good starting point for theme development. It is also a good resource for debugging styling issues.

Headings (this is h2)

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This is h3

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This is h4

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This is h5

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This is h6

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

This paragraph is here to show the vertical spacing between headings and paragraphs. In addition, let's make it a bit longer so we can see the line height as the text wraps.

Links and buttons

A regular link looks like this, whereas buttons look like this:

Main button styles

State button styles

Other button styles

Outlined button styles

Button sizes

Named colors

  • tw:base-100
  • tw:base-200
  • tw:base-300
  • tw:primary
  • tw:secondary
  • tw:neutral
  • tw:accent
  • tw:success
  • tw:info
  • tw:warning
  • tw:error
  • tw:text-base-100-content tw:bg-base-100
  • tw:text-base-200-content tw:bg-base-200
  • tw:text-base-300-content tw:bg-base-300
  • tw:text-primary-content tw:bg-primary
  • tw:text-secondary-content tw:bg-secondary
  • tw:text-neutral-content tw:bg-neutral
  • tw:text-accent-content tw:bg-accent
  • tw:text-success-content tw:bg-success
  • tw:text-info-content tw:bg-info
  • tw:text-warning-content tw:bg-warning
  • tw:text-error-content tw:bg-error
  • tw:text-base-100-content tw:bg-base-100/90
  • tw:text-base-200-content tw:bg-base-200/90
  • tw:text-base-300-content tw:bg-base-300/90
  • tw:text-primary-content tw:bg-primary/90
  • tw:text-secondary-content tw:bg-secondary/90
  • tw:text-neutral-content tw:bg-neutral/90
  • tw:text-accent-content tw:bg-accent/90
  • tw:text-success-content tw:bg-success/90
  • tw:text-info-content tw:bg-info/90
  • tw:text-warning-content tw:bg-warning/90
  • tw:text-error-content tw:bg-error/90
  • tw:text-base-100-content tw:bg-base-100/80
  • tw:text-base-200-content tw:bg-base-200/80
  • tw:text-base-300-content tw:bg-base-300/80
  • tw:text-primary-content tw:bg-primary/80
  • tw:text-secondary-content tw:bg-secondary/80
  • tw:text-neutral-content tw:bg-neutral/80
  • tw:text-accent-content tw:bg-accent/80
  • tw:text-success-content tw:bg-success/80
  • tw:text-info-content tw:bg-info/80
  • tw:text-warning-content tw:bg-warning/80
  • tw:text-error-content tw:bg-error/80
  • tw:text-base-100-content tw:bg-base-100/70
  • tw:text-base-200-content tw:bg-base-200/70
  • tw:text-base-300-content tw:bg-base-300/70
  • tw:text-primary-content tw:bg-primary/70
  • tw:text-secondary-content tw:bg-secondary/70
  • tw:text-neutral-content tw:bg-neutral/70
  • tw:text-accent-content tw:bg-accent/70
  • tw:text-success-content tw:bg-success/70
  • tw:text-info-content tw:bg-info/70
  • tw:text-warning-content tw:bg-warning/70
  • tw:text-error-content tw:bg-error/70
  • tw:text-base-100-content tw:bg-base-100/60
  • tw:text-base-200-content tw:bg-base-200/60
  • tw:text-base-300-content tw:bg-base-300/60
  • tw:text-primary-content tw:bg-primary/60
  • tw:text-secondary-content tw:bg-secondary/60
  • tw:text-neutral-content tw:bg-neutral/60
  • tw:text-accent-content tw:bg-accent/60
  • tw:text-success-content tw:bg-success/60
  • tw:text-info-content tw:bg-info/60
  • tw:text-warning-content tw:bg-warning/60
  • tw:text-error-content tw:bg-error/60
  • tw:text-base-100-content tw:bg-base-100/50
  • tw:text-base-200-content tw:bg-base-200/50
  • tw:text-base-300-content tw:bg-base-300/50
  • tw:text-primary-content tw:bg-primary/50
  • tw:text-secondary-content tw:bg-secondary/50
  • tw:text-neutral-content tw:bg-neutral/50
  • tw:text-accent-content tw:bg-accent/50
  • tw:text-success-content tw:bg-success/50
  • tw:text-info-content tw:bg-info/50
  • tw:text-warning-content tw:bg-warning/50
  • tw:text-error-content tw:bg-error/50
  • tw:text-base-100-content tw:bg-base-100/40
  • tw:text-base-200-content tw:bg-base-200/40
  • tw:text-base-300-content tw:bg-base-300/40
  • tw:text-primary-content tw:bg-primary/40
  • tw:text-secondary-content tw:bg-secondary/40
  • tw:text-neutral-content tw:bg-neutral/40
  • tw:text-accent-content tw:bg-accent/40
  • tw:text-success-content tw:bg-success/40
  • tw:text-info-content tw:bg-info/40
  • tw:text-warning-content tw:bg-warning/40
  • tw:text-error-content tw:bg-error/40
  • tw:text-base-100-content tw:bg-base-100/30
  • tw:text-base-200-content tw:bg-base-200/30
  • tw:text-base-300-content tw:bg-base-300/30
  • tw:text-primary-content tw:bg-primary/30
  • tw:text-secondary-content tw:bg-secondary/30
  • tw:text-neutral-content tw:bg-neutral/30
  • tw:text-accent-content tw:bg-accent/30
  • tw:text-success-content tw:bg-success/30
  • tw:text-info-content tw:bg-info/30
  • tw:text-warning-content tw:bg-warning/30
  • tw:text-error-content tw:bg-error/30
  • tw:text-base-100-content tw:bg-base-100/20
  • tw:text-base-200-content tw:bg-base-200/20
  • tw:text-base-300-content tw:bg-base-300/20
  • tw:text-primary-content tw:bg-primary/20
  • tw:text-secondary-content tw:bg-secondary/20
  • tw:text-neutral-content tw:bg-neutral/20
  • tw:text-accent-content tw:bg-accent/20
  • tw:text-success-content tw:bg-success/20
  • tw:text-info-content tw:bg-info/20
  • tw:text-warning-content tw:bg-warning/20
  • tw:text-error-content tw:bg-error/20
  • tw:text-base-100-content tw:bg-base-100/10
  • tw:text-base-200-content tw:bg-base-200/10
  • tw:text-base-300-content tw:bg-base-300/10
  • tw:text-primary-content tw:bg-primary/10
  • tw:text-secondary-content tw:bg-secondary/10
  • tw:text-neutral-content tw:bg-neutral/10
  • tw:text-accent-content tw:bg-accent/10
  • tw:text-success-content tw:bg-success/10
  • tw:text-info-content tw:bg-info/10
  • tw:text-warning-content tw:bg-warning/10
  • tw:text-error-content tw:bg-error/10

Tabs

This is 1