Tailwind for JavaScript

This page applies to the banner from @cookieyes/vanilla. @cookieyes/core alone draws nothing, so there is nothing for it to style.

Set it up

Import the SDK's stylesheet after Tailwind. Tailwind's preflight resets buttons and headings; loaded after the SDK, it would strip the banner's own button styles.

@import "tailwindcss";
@import "@cookieyes/vanilla/styles.css";

If you import the stylesheet in your consent file instead, remove that import and keep this one, so the order is fixed in one place.

Use utilities on parts

On a part, with @apply. Best for anything systematic:

@import "tailwindcss";
@import "@cookieyes/vanilla/styles.css";

[data-cy-part="banner"] {
  @apply max-w-lg rounded-xl p-6 shadow-2xl;
}

[data-cy-part="accept-all"] {
  @apply font-semibold;
}

Good to know

• A utility has the same strength as the SDK's own rule, so it wins only if your CSS comes after styles.css. Do not use the ! modifier or @layer components for these rules; both hide the ordering problem instead of fixing it.
• The components render into <body>, so group- and peer- variants from your tree do not reach them.
• The SDK does not read Tailwind's dark class. Set colorScheme to match your default scheme and switch the variables from html.dark: see Colour scheme.

Common mistakes

The banner's buttons look like plain text. Tailwind loaded after the SDK's stylesheet. Put the @cookieyes stylesheet import last.

Next steps

• Custom CSS: the same in plain CSS
• Parts: the names to @apply against