consul/ui/packages/consul-ui/app/styles/tailwind.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .consul-surface-nav {
    background: var(--token-color-palette-neutral-700);
  }
}
ui: Setup Hashicorp Design System for usage in consul-ui (#14394) * Use postcss instead of ember-cli-sass This will make it possible to work with tailwindcss. * configure postcss to compile sass * add "sub-app" css into app/styles tree * pin node@14 via volta Only used by people that use volta * Install tailwind and autoprefixer * Create tailwind config * Use tailwind via postcss * Fix: tailwind changes current styling When adding tailwind to the bottom of app.scss we apparently change the way the application looks. We will import it first to make sure we don't change the current styling of the application right now. * Automatic import of HDS colors in tailwind * Install @hashicorp/design-system-components * install add-on * setup postcss scss pipeline to include tokens css * import add-on css * Install ember-auto-import v2 HDS depends on v2 of ember-auto-import so we need to upgrade. * Upgrade ember-cli-yadda v0.6.0 of ember-cli-yadda adds configuration for webpack. This configuration is incompatible with webpack v5 which ember-auto-import v2 is using. We need to upgrade ember-cli-yadda to the latest version that fixes this incompatability with auto-import v2 * Install ember-flight-icons HDS components are using the addon internally. * Document HDS usage in engineering docs * Upgrade ember-cli-api-double * fix new linting errors 2022-10-06 17:17:20 +02:00			`@tailwind base;`
			`@tailwind components;`
			`@tailwind utilities;`
Update hds-docs with custom utility class 2022-10-25 18:40:36 +02:00
			`@layer utilities {`
			`.consul-surface-nav {`
			`background: var(--token-color-palette-neutral-700);`
			`}`
			`}`