Next.js: Tailwind CSS base utilities not applied to production builds for TypeScript projects

[dbk91]

Bug report

Describe the bug

Production builds of Next.js do not apply the base Tailwind utilities in the static build if any components in the pages/ directory imports any external TypeScript components (such as components/nav.tsx), the build only apply the styling added into the

To Reproduce

1. Create a new NextJS project using yarn create next-app project-name
2. Select with-tailwindcss example project
3. Add required TypeScript dependencies yarn add --dev typescript @types/react @types/node
4. Rename components/nav.js to components/nav.tsx
5. Run yarn run build && yarn run start
6. Navigate to http://localhost:3000

Expected behavior

That it would leverage the base Tailwind CSS utilities and appear as the default rather than the screen shot below.

Screenshots

The base utilities, such as flexbox, are lost. Only the styles using the @apply attribute in styles/index.css are applied.

System information

• OS: macOS
• Version of Next.js: 9.2.0
• Version of Node.js: 14.4.0

Additional context

This doesn't seem to happen if any page components are using TypeScript, only if the components that the page components import are using TypeScript.

[timneutkens]

Think this is a tailwind bug actually, where it uses PurgeCSS only on .js files 🤔 cc @adamwathan

[adamwathan]

Hey! Make sure you are configuring Tailwind to look through all the relevant files here:

https://github.com/vercel/next.js/blob/canary/examples/with-tailwindcss/tailwind.config.js#L2

The example you started with is only looking for .js files, so you just need to update that array of paths to also make sure it's looking for any other file types that might contain any markup.

[dbk91]

Ah, that did it. Feel a little silly for missing that. Thanks for the quick response!

[timneutkens]

We'll want to update that example to also include .tsx .jsx and .ts