citizenfx
Update FiveM CEF to support tailwind v4
What happened?
Tailwind v4 introduced OKLCH color codes. OKLCH is not yet supported by the current version of cef chromium running on FiveM.
Expected result
Run OKLCH colors
Reproduction steps
Use tailwind4 colors.
Importancy
Slight inconvenience
Area(s)
FiveM
Specific version(s)
FiveM all versions
Additional information
No response
An update to a newer CEF build is still planned and, based on public GitHub logs, is actively in progress.
An update to a newer CEF build is still planned and, based on public GitHub logs, is actively in progress.
Finally, because before team said, I quote:
We don't plan to update CEF currently. Whole NUI thing is a big mess, so it will not worth it
If that‘s the response you received then this of course holds more value to it than any code activity one might observe. I just based my comment on: https://github.com/citizenfx/cef/tree/cfx-m130 and recent work on the associated build scripts. Might be no indication for a planned update then.
I'm not sure if there is someone interested in that part to transfer the changes on the CEF side.
One thing I have found out is that you can polyfill your css for things like tailwind v4 with postcss-preset-env. It's a postcss plugin that will run at build time and fill in rgb fallbacks to your oklch colors. I run it as a vite postcss plugin with no config and it seems to do the job. I have not tested it extensively so i am not sure what might still be broken... maybe some VERY new css features that tailwind might use.
...
We don't plan to update CEF currently. Whole NUI thing is a big mess, so it will not worth it
What does that have to do with CEF? NUI and CEF are entirely different things, you can update the underlying CEF without touching NUI code.
One thing I have found out is that you can polyfill your css for things like tailwind v4 with postcss-preset-env. It's a postcss plugin that will run at build time and fill in rgb fallbacks to your oklch colors. I run it as a vite postcss plugin with no config and it seems to do the job. I have not tested it extensively so i am not sure what might still be broken... maybe some VERY new css features that tailwind might use.
Easiest way is to just go and check 3.x version theme files and extend your tailwindcss config with the old rgb values so they're overwritten. Takes 5 seconds at most to copy over content into your config file.
@RussianRonin
postcss-preset-env does not override well tailwind v4 css.
css: { postcss: { plugins: [postcssPresetEnv({ features: {} })] } },
Am I doing something wrong?
postcss-preset-env does not override well tailwind v4 css.
css: { postcss: { plugins: [postcssPresetEnv({ features: {} })] } },Am I doing something wrong?
Not trying to provide support but it looks like you are overriding the features with nothing so it isn't doing anything possibly. This is my vite config:
css: {
postcss: {
plugins: [
postcssPresetEnv
]
}
}
I leave here my config that worked with postcss as said above.
vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath } from 'url';
import path from 'path';
import postcssPresetEnv from 'postcss-preset-env';
import tailwindcss from '@tailwindcss/postcss';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default defineConfig({
plugins: [react()],
base: './',
css: {
postcss: {
plugins: [
postcssPresetEnv({}),
tailwindcss({}),
]
}
},
build: {
outDir: '../build',
emptyOutDir: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
'@utilities': path.resolve(__dirname, './src/utilities'),
},
},
});
Without any configuration, postcss-preset-env won't magically make it happen for you. The query should be adjusted to support the Chrome version being used in FiveM.
export default {
plugins: {
'@tailwindcss/postcss': {},
'postcss-preset-env': {
stage: 2,
browserslist: '> 0.2% and not dead and Chrome >= 103',
},
},
};
