How to use Tailwind config with @tailwindcss/postcss?

[nieling1]

I'm currently using @tailwindcss/postcss and trying to pass my Tailwind configuration file to the plugin. My code looks like this:

import postcss from 'postcss';
import tailwindcssPostcssPlugin from '@tailwindcss/postcss';

await postcss([
  tailwindcssPostcssPlugin({
    base: tempJsxFile,
    optimize: true,
   })
]).process(...);

How can I properly include my tailwind.config.js file in this setup? Is there a specific way to load and pass the configuration to @tailwindcss/postcss?

Thanks in advance for your help!

[wongjn]

@tailwindcss/postcss is for v4. So, to pass in configuration, it would be directives in the source CSS you pass in (like @theme, @source, @utility, etc).

[nieling1]

I want to avoid using oklab in the generated Tailwind CSS code because its compatibility is not ideal. For example:

.bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
}

Is there a way to configure this to use a more compatible color space? Or could you point me to any related documentation?

Thank you!

[wongjn]

There is no Tailwind configuration to change the oklab color space.

If you are concerned about browser support, then perhaps v4 might not suit your project. Consider reviewing the browser compatibility requirements, as it may not be just oklab colors, but it could be other modern CSS features that may not work.

Other than that, you could have a PostCSS plugin that runs after Tailwind that converts any mentions of oklab or oklab colors and converts them into something more compatible.