CSS Layers

All Axiom styles are declared inside an @layer  rule called optiaxiom to allow controlling the order of precedence of styles.

@layer optiaxiom {
  @layer theme, base, components;
 
  /* all Axiom styles */
}

Application styles containing reset/normalize rules and rules that target elements without any class modifiers can conflict with styles coming from Axiom. Place these application styles inside the optiaxiom.base layer so they come first in the cascade and can be overridden by Axiom.

#

Usage

#

Global styles

Place your global style rules inside the optiaxiom.base layer to ensure they are applied before any of Axiom’s other styles.

@layer optiaxiom.base {
  /* your global styles */
  /*
    html { ... }
    a { ... }
  */
}

#

Tailwind

Place your Tailwind base directive inside the optiaxiom.base layer to prevent conflicts with styles coming from Axiom.

#

Tailwind CSS 4.0

@layer theme, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(optiaxiom.base);
@import "tailwindcss/utilities.css" layer(utilities);

#

Tailwind CSS 3.0

@layer optiaxiom.base {
  @tailwind base;
}
 
@tailwind components;
@tailwind utilities;