Next.js: with-tailwindcss example breaks when typescript is added

[gihrig]

Examples bug report

with-tailwindcss

Describe the bug

with-tailwindcss works as expected when installed as instructed in its README. When typescript is installed as instructed in the Next docs, tailwind is rendered inoperative and no styles appear in the browser.

To Reproduce

$ npx create-next-app --example with-tailwindcss next-ts-tailwind
$ cd next-ts-tailwind && yarn dev

open http://localhost:3000 >>> App works as expected

Install typescript

$ touch tsconfig.json
$ yarn add --dev typescript @types/react @types/node
$ yarn dev

open http://localhost:3000 >>> App works as expected

Enable typescript

$ mv ./pages/index.js ./pages/index.tsx
$ mv ./pages/_app.js ./pages/_app.tsx
$ mv ./components/nav.js ./components/nav.tsx
$ yarn dev

open http://localhost:3000 >>> App loads without styles

Inspecting page in browser's dev tools shows tailwind classes added to html elements but there is no evidence of tailwind css in the document head.

This condition applies to any single file with a .tsx extension. I need not rename all three .js files to see the failure.

Expected behavior

The app should function identically whether files have .js or .tsx extensions.

System information

• OS: macOS Mojave 10.14.6
• Browser: Brave Version 1.0.0 Chromium: 78.0.3904.97 (Official Build) (64-bit)
• Version of Next.js: 9.1.3

Additional context

A worked example is available here.

Following this example from the web, I am able to get Create-React-App + tailwind + typescript to work together, so I see this combination can work.

[jamesmosier]

Moving this /* purgecss end ignore */ to line 8 (below the last tailwind import) seems to fix this. I'm still investigating why that happens though when typescript is enabled vs when its not.

[gihrig]

@jamesmosier thank you for looking into this, and pointing me in the right direction!

There appears to be a typescript/purgecss interaction which is the source of the missing styles.

And the answer to that is the postcss.config.js purgecss content: segment only targets '.js' files:

Changing

content: ['./pages/**/*.js', './components/**/*.js'],

to

content: ['./pages/**/*.tsx', './components/**/*.tsx'],

Handles the problem in this case, with index.css left in its original state.

In the with-tailwindcss example the content: ... segment should be changed to something like:

      content: [
        './pages/**/*.js', './components/**/*.js',
        './pages/**/*.ts', './components/**/*.ts',
        './pages/**/*.tsx', './components/**/*.tsx'
      ],

Let me know if you would like a PR opened with this change.

Thanks again for your help!

[jamesmosier]

You're welcome @gihrig, good find with the fix. Feel free to open a PR with the fix, otherwise I can take care of it. Just let me know.

Also instead of listing all the different extensions out, you could do:

content: [
  "./pages/**/*.{js,jsx,ts,tsx}",
  "./components/**/*.{js,jsx,ts,tsx}"
],

[gihrig]

Hi @jamesmosier. I have opened PR #9432 with the fix.

Regarding the updated search path, thanks for that. I spent too much time trying various regex and glob patterns, before resigning myself to a 'workable kludge'. ;-)