what to use instead of tailwind.config.ts in tailwind v4
Unanswered
Chow Chow posted this in #help-forum
Chow ChowOP
im making monorepo and need to know what to use instead of tailwind and postcss configs like it was in v3. I need to connect mini-projects(some projects inside of monorepo) tailwind configs to the ui directory config and it makes it difficult to adapt
example from one of mini-projects using tailwind v3
tailwind.config.ts////////////
import type { Config } from 'tailwindcss'
const config: Config = {
presets: [require('../../libs/ui/tailwind.config')],
content: ['./src//*.{ts,tsx}', '../../libs/ui//*.{ts,tsx}'],
}
export default config
postcss.config.mjs/////////////////
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
}
export default config
example from one of mini-projects using tailwind v3
tailwind.config.ts////////////
import type { Config } from 'tailwindcss'
const config: Config = {
presets: [require('../../libs/ui/tailwind.config')],
content: ['./src//*.{ts,tsx}', '../../libs/ui//*.{ts,tsx}'],
}
export default config
postcss.config.mjs/////////////////
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
}
export default config
9 Replies
In tailwind v4 the config file disappears and now it’s all done in .css files, have you checked the upgrade guide from the tailwind team?
@LuisLl In tailwind v4 the config file disappears and now it’s all done in .css files, have you checked the **upgrade guide** from the tailwind team?
Chow ChowOP
i' ve made tailwind.css file and wrote @config "../../libs/ui/tailwind.config"; as in upgrade guide . I dont know if its right but it doesnt work
Are you importing this
tailwind.css file in your root layout?If you had already a globals.css file you can make the changes in that one
@LuisLl Are you importing this `tailwind.css` file in your root layout?
Chow ChowOP
i've just realized, that im using tailwind config from another directory, but i must get rid of all tailwind configs and update to v4 so it makes all harder)
American Crocodile
we published our base as a package when using turborepo
/* file /apps/web/global.css */
@import '@repo/ui/themes/fonts.css';
@import 'tailwindcss';
@config "../../tailwind.config.ts";
@import '@repo/ui/themes/base.css';you can also import the config if you are in between ... this config is in our apps/web
but we could also do @repo/ui/config.ts
but we could also do @repo/ui/config.ts