Style Guide

Define Tailwind and DaisyUI theme variables in /app/assets/tailwind/application.css.

Edit global CSS styles in /app/assets/tailwind/global.css.

Customize DaisyUI utilities in /app/assets/tailwind/utilities.css.

Set fluid typography and spacing variables in /app/assets/tailwind/utopia.css.


Watch this page to see live results.

Color palette

Theme colors can be used either as Tailwind utilities like .bg-midtone or literal CSS custom properties like var(--color-midtone). Brand and status colors are shown below using the --color-xxx-content class for text.

--color-<color> .xx-<color>
--color-primary
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-secondary
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-accent
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-info
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-success
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-warning
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-error
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-white
--color-lighter
--color-light
--color-midtone
--color-dark
--color-darker
--color-black

Fluid space

Fluid spaces are set using Utopia (see app/assets/tailwind/utopia.css). These spacing sizes can be used throughout your project to keep spacing consistent and responsive.

--spacing-3xs .xx-3xs
--spacing-2xs .xx-2xs
--spacing-xs .xx-xs
--spacing-sm .xx-sm
--spacing-md .xx-md
--spacing-lg .xx-lg
--spacing-xl .xx-xl
--spacing-2xl .xx-2xl
--spacing-3xl .xx-3xl

Fluid typography

Fluid typography sizes are set using Utopia (see app/assets/tailwind/utopia.css). Use these for consistent and responsive font sizes.

h1

H1 Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

h2

H2 Consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

h3

H3 Facere, temporibus minima ea

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

h4

H4 laudantium voluptatum a esse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

--text-xs .text-xs

Imagine a combination of IIS and J2EE. Is it more important for something to be best-of-breed? The portals factor can be delivered as-a-service to wherever it’s intended to go – mobile.

--text-sm .text-sm

We believe we know that if you drive micro-mega-cyber-virally then you may also mesh iteravely. If you transition globally, you may also reintermediate magnetically.

--text-base .text-base (default)

Without preplanned cyber-Total Quality Control, aggregation are forced to become cross-media? We think that most C2C2C web-based applications use far too much XSL, and not enough PNG. We apply the proverb 'Look before you leap' not only on our feature set, but our granular integrated, value-added convergence and easy use is frequently considered a terrific achievement.

--text-lg .text-lg

Without micro-resource-constrained performance, you will lack architectures. The capability to implement wirelessly leads to the capacity to harness without devaluing our power to syndicate. Our infinitely reconfigurable feature set is second to none, but our strategic angel investors and user-proof use.

--text-xl .text-xl

Without interfaces, you will lack affiliate-based compliance. Without efficient, transparent bloatware, you will lack affiliate-based compliance. Without niches, you will lack experiences.

blockquote
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse tempora nobis aut expedita perspiciatis laudantium, dolore odit. Exercitationem cum harum aperiam non sapiente, dolorum deleniti! Eos, minima doloremque? Nesciunt, eum!
mark

Use a mark tag to highlight.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit asperiores sapiente, quaerat totam, dolores reiciendis consectetur.

a

Style for all anchor links except children of a nav element.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit asperiores sapiente, quaerat totam, dolores reiciendis consectetur.

Lists

List tags are styled directly with no additional classes required.

ul li
  • 2 pounds cat litter
  • 1/2 Liter dumpster juice
  • 2 hairballs
  • 4 tablespoons pigeon droppings
ol li
  1. Wake up
  2. Brush coffee
  3. Fry the cat
  4. Vacuum the lawn

Tables

To get this styling, please wrap your table in a <table-wrapper> element. This is necessary because of CSS limitations on table styling (specifically with regard to border-radius). Table tags are styled directly with no additional classes required.

table-wrapper table th tr td
Name Age Email
Bob 45 bob@gmail.com
Dave 38 dave@gmail.com
Sarah 26 sarah@gmail.com
Orville 93 orville@gmail.com

Forms

Form elements are styled with DaisyUI. Wrap each form element and related items such as a label and error message in a <fieldset> element. This is used to group related form elements in a flex container. You can view the source of this page to see how it is structured. The fluid-wrap element or class can be used to wrap multiple fieldsets into a flex container so that they display horizontally if there's enough space.

fluid-wrap fieldset label input span.note span.error select textarea
Helpful note
Validation error message

Groups of checkboxes and radio buttons are styled with DaisyUI. These should be wrapped in a fieldset element and the group class. Use the legend element to add a label for the group. View source for this page to see how it is structured.

legend input[checkbox] input[radio]
Checkboxes
Radios
Toggles

Buttons

Buttons use DaisyUI's button styles.

button .btn
button.btn-soft .btn.btn-soft
button.btn-outline .btn.btn-outline