TailwindCSS V4

When integrating TailwindCSS with @cfa/react-core, there are a few things that need to be considered to avoid styling conflicts — particularly with Tailwind’s base layer. This layer includes global resets and defaults, which can clash with our own CSS resets and global styles.

We do not recommend using ThemeProvider in Tailwind projects. Instead, refer to the strategies below for more effective ways to apply our styles.

CSS Setup

postcss.config.js

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

globals.css

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "@cfa/react-core/index.css" layer(components);
@import "tailwindcss/utilities.css" layer(utilities);

This ensures that the Tailwind utilities are loaded after our custom CSS, this will help you avoid issues when trying to override our internal CSS.

Theme Preset

We provide a helpful Tailwind preset that will allow you to map all of our design tokens, which includes different values for:

• Colors
• Sizing
• Fonts
• Border Radius

1. Install package

npm install @cfa/tailwind-utils

2. Import theme CSS in global stylesheet

The order of these imports are important, this will ensure that there are no override issues.

You can find the actual theme here.

globals.css

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "@cfa/tailwind-utils/v4-theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "@cfa/react-core/index.css" layer(components);
@import "tailwindcss/utilities.css" layer(utilities);

This would enable you to then use the new values as shown below.

page.tsx

function Page() {
  return (
    <div className="bg-brand-red">
      <h1 className="text-brand-blue">Hello World</h1>
    </div>
  );
}