CSS (and Tailwind) Guidelines

Dos

• Add a tailwind prefix for anything other than the core site. Plugins, packages, etc. This will avoid competing rules.
  • For example, if a component has a class of block lg:hidden, the block class may actually take precedence over the lg:hidden class if another plugin or library utilizes the block class but not lg:hidden.
• Include only the @import "tailwindcss/theme.css" and @import "tailwindcss/utilities.css" modules from CSS files that are not the main CSS file (i.e. plugin or package CSS). This will avoid the base and component layers from being included multiple times, easing debugging.

Do Nots

• Use @layer recklessly, while great for creating a base layer, it can also lead to styles being overwritten by the most inconspicuous of rules downstream. For example:

  @layer components {
  	.big-paragraph {
  		font-size: 2rem;
  	}
  }

  Will be overwritten by a reset such as:

  p {
  	font-size: 1rem;
  }