Layers
Mid-2023 support at 91%
Summary
The @layer
selector is a way to group styles together in order to prioritize the cascade, eliminating the need for overrides using !important
Example below. The tricky thing however is that a project needs to fully implement layers. Any un-layered styles will override layer styles.
@layer reset /* lowest priority style */
@layer theme /* next higher priority style */
@layer global /* next higher priority style */
@layer layout /* next higher priority style */
@layer components /* next higher priority style */
@layer utilities /* next higher priority style */
@layer states /* highest priority style */
More Info
Last updated