Tailwind CSS base utilities not applied to production builds for TypeScript projects

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.

[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.

[lucasoz]

I’ve been trying to solve this complication for the past 2 hours. I’ve tried every method mentioned here. Still not working 😦 @adamwathan

Same for me