Skip to content

The Hyvä Theme CSS File Directory Structure

In Hyvä themes, the source CSS files are located in directories under web/tailwind.

./web/tailwind
├── base
├── components
├── generated
├── utilities
└── theme
  • The base/ directory contains the Hyvä preflight CSS, with some better defaults than the default Tailwind preflight. It also serves as an example how to do classless styling.
  • The components/ directory contains styles for components such as toolbar, button, form, and messages.
  • The generated/ directory contains the hyva-source.css and hyva-tokens.css generated by the hyva-modules commands npx hyva-sources and npx hyva-tokens.
  • The utilities/ directory contains custom utilities.
  • The theme/ directory contains page specific or custom styles.

Versions of Hyvä theme before 1.4.0 were less structured.

If you are working on a build based on Hyvä 1.3.x or older you may encounter a different default directory layout.