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

[wouterds]

Don't know how I got it wrong (as I was using it pre TailwindcssV2 and everything was fine). But changing purge in tailwind.config.js as in the one @adamwathan mentioned resolved my issues.

[Mayank-Dev-23]

i am having a same issue i created a next js website with tailwind css but when i deploy only the base style apply and all other styles not apply i name my components as .js how to fir this bug help

[rsipakov]

i am having a same issue i created a next js website with tailwind css but when i deploy only the base style apply and all other styles not apply i name my components as .js how to fir this bug help

For me work this code in tailwind.css:
@tailwind base;
/* purgecss start ignore */
@tailwind components;
@tailwind utilities;
/* purgecss end ignore */

example https://github.com/missioniz/greenera/blob/master/src/styles/globalStyles/tailwindcss.css

[JosiasAurel]

I am currently experiencing a similar issue. Here is my tailwind config

module.exports = {
  purge: ["./pages/**/*.{js, ts, jsx, tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

I only have a pages and components folder like that in the config.

[henke443]

I am currently experiencing a similar issue. Here is my tailwind config

module.exports = {
  purge: ["./pages/**/*.{js, ts, jsx, tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

I only have a pages and components folder like that in the config.

I had this exact same issue and it will work when you change "./pages/**/*.{js, ts, jsx, tsx}" to "./pages/**/*.{js,ts,jsx,tsx}".

[mahijendra]

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

[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

[estruyf]

Experiencing this as well, and just found out that clearing the build cache or doing a package.json update fixes it until new classes get introduced.

[AR-Student824]

None of the solutions mentioned here are working

[adamwathan]

Can you folks please open issues on Tailwind itself if you're having problems and include a reproduction? I can't get this to happen in a fresh project, so if someone can provide a reproduction I'll have a much easier time figuring out the issue.

[estruyf]

@adamwathan I wasn't aware of the new JIT compiler. I will test this one out and see if the issue still occurs, but on my end, it only seems to happen during production builds on Vercel. Not on my local machine(s).

[Nick-Achee]

Hi there everyone! I don't have a solution for this but I am experiencing the same issue. I will keep searching StackOverflow and let you know if I find something. Chat soon 🤙

[adamwathan]

@Nick-Achee Please open an issue here with a reproduction and we can fix it:

https://github.com/tailwindlabs/tailwindcss

Right now I have absolutely no information to go off of. I can't help unless someone gives me an example project, our own Next.js projects (we have many of them) don't suffer from this at all.

[Nick-Achee]

@adamwathan - I went ahead and added the other file types to all purge paths and it fixed the issue.

Working in production now. Thanks.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.