What is the improvement or update you wish to see?

I followed the Tailwind CSS guide, but ran into an issue with CSS class priority order when the same Tailwind class was used in packages/ui and apps/docs.

Is there any context that might help us understand?

Steps to reproduce

1. Create a new project using the with-tailwind template:

pnpm dlx create-turbo@latest -e with-tailwind

2. Add a new Grid component with the grid-cols-1 tailwind class in packages/ui/src/grid.tsx:

import { type ReactNode } from 'react';

export function Grid({ children }: { children: ReactNode }) {
  return <div className="grid grid-cols-1 gap-4">{children}</div>;
}

3. Add a div in apps/docs/app/page.tsx that also has the grid-cols-1 class:

export default function Page() {
  return (
    <main className="flex flex-col items-center justify-between min-h-screen p-24">
      <div className="grid grid-cols-1 text-center lg:w-full lg:grid-cols-4 lg:text-left">
        ...
      </div>
    </main>
  );
}

Expected behavior

At ≥ lg breakpoint, the grid should switch to 4 columns (lg:grid-cols-4).

Actual behavior

grid-cols-1 remains in effect because its rule appears after the lg:grid-cols-4 rule in the final CSS bundle.

Link to code that reproduces the issue

https://github.com/jaredpiedt/turbo-tailwind-bug

To view the final CSS bundle you can run the following command from the root:

pnpm dlx @tailwindcss/cli -i ./apps/docs/app/globals.css -o output.css

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

https://turborepo.com/docs/guides/tools/tailwind