📚 Docs: Update with-tailwind example to tailwind 4.0

[trigger67]

What is the improvement or update you wish to see?

The with-tailwind project example uses tailwind 3.4.

I guess it would be helpful to a lot of people to update it to 4.0.

Does the docs page already exist? Please link to it.

https://github.com/vercel/turborepo/tree/main/examples/with-tailwind

[sebalaini]

that would be great, I'm trying to migrate the deprecate config file but can't figure out how to load my custom theme.

I created the @theme layer in the global.css but looks like most the classes aren't working 🤔

[anthonyshew]

I did try to make this upgrade a few weeks ago, but it looked like Tailwind v4 had introduced a number of bugs, unfortunately. From my memory, I remember prefixes not working, but there were a few others as well.

I'll leave this open as a reminder to try again at a later date.

[sebalaini]

I haven't tried it out yet but looks like someone already found the solution, see stackoverflow

I also don't know how good is as a solution but maybe a starting point.

[jamestrenda]

I was able to get v4 working by creating a tailwind config file and then referencing it in my stylesheet. According to the Tailwind documentation, config files are still supported, but v4 does not automatically detect them. So...

Project Structure

project/
├── apps/
│   ├── web/
│   │   ├── app/
│   │   │   ├── layout.tsx
│   │   ├── postcss.config.mjs
│   │   ├── tailwind.config.ts
├── packages/
│   ├── ui/
│   │   ├── src/
│   │   │   ├── styles/
│   │   │   │   │── global.css
│   │   ├── postcss.config.mjs
│   │   ├── tailwind.config.ts

Next.js app (apps/web)

Basically, import everything from the UI package.

apps/web/app/layout.tsx:

import '@repo/ui/src/styles/global.css';
// ...

apps/web/postcss.config.mjs:

export { default } from "@repo/ui/postcss.config";

apps/web/tailwind.config.ts:

export * from "@repo/ui/tailwind.config";

UI Package (packages/ui)

packages/ui/src/styles/global.css:

@import 'tailwindcss';
@config "../../tailwind.config.ts"; /* <-- the key to making this work in v4 */

/* ... */

packages/ui/postcss.config.mjs:

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

packages/ui/tailwind.config.ts:

import type { Config } from "tailwindcss";

const config = {
  // this file is located in packages/ui, but it is being used by apps/web (and any future web apps).
  // hence, the following paths:
  content: ["app/**/*.{ts,tsx}", "../../packages/ui/src/**/*.{ts,tsx}"],
} satisfies Config;

export default config;

Without the @config in packages/ui/src/styles/global.css, changes to my UI components would not be reflected in the global stylesheet. But with @config, any tailwind changes I make to files in apps/web/app or packages/ui/src are now correctly reflected in the global stylesheet being imported in apps/web/app/layout.tsx.

Hope this helps!

[thejus-r]

I got a simple solution working

@import "tailwindcss";
@source "@repo/ui";

this worked for my use case.

[sebalaini]

In the end, I'm using one of the 2 ways mentioned in SO.

/* packages/ui/styles.css */
@import 'tailwindcss';

@source "./";

...

/* packages/ui/package.json */
"exports": {
  …
  "./styles.css": "./styles.css"
}

/* apps/user-app/style/globals.css */
@import "tailwindcss";
@import "@repo/ui/styles.css";

If I need to override something:

/* apps/user-app/style/globals.css */
@import "tailwindcss";
@import "@repo/ui/styles.css";

@theme {
  /* font family */
  --font-primary: 'Arapey';
  --font-secondary: 'Work Sans';
  --font-tertiary: 'Sedgwick Ave';
}

[Prash766]

found a way I don't know how feasible it is

Created a tailwind.config.js file in the root of Next.js project with the following content:

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

updated the global CSS file (e.g., apps/client/app/global.css) to include:

@config "../tailwind.config.js";
@import "tailwindcss";

[anthonyshew]

@Prash766 You'll need to be careful with this strategy, since some of these globs will include node_modules, and can end up being dreadfully slow at scale.

[Prash766]

@anthonyshew thanks for pointing that out! updated the tailwind.config.js to explicitly exclude node_modules

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
      "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}",
        "!**/node_modules/**"    //exlcluded node_modules
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

is this way optimal, or are there any other things i need to consider