All the styles files

The starter theme use TailwindCSS

Main file is assets/css/style.css. If you add files, don't forget to add the import in the main file :

/** DEFAULT FOR EXAMPLE */
@import './default.css';

Editor CSS

The main file for Gutenberg editor is editor.css.

All declarations in this file, will be apply in gutenberg editor.

This file isn't loaded in front.

Configuration

The main config is in the file tailwind.config.js

To avoid a complete reset of the style from theme.json, the TailwindCSS "preflight" on front is disabled with:

const usePreflightFront = false

This setting can be confusing sometime with TailwindCSS value like content or border.

You can activate the "preflight" if you want. But when you use "preflight", you'll lost the settings for font size, etc. defined in the theme.json

Palette in TailwindCSS

The theme use @_tw/themejson

The palettes in theme.json are availables in TailwindCSS (with classes like bg-primary or text-primary), and the values for contentSize and wideSize are available for setting max-width with either max-w-content or max-w-wide.

Edit this page on GitHub
Table of Contents