Tailwind Doesn't Generate Class

[yagudaev]

What version of Tailwind CSS are you using?

v2.1.4

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 10.2.3

What version of Node.js are you using?

v16.3.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/yagudaev/tailwindcss-race-condition

Describe your issue

I started a new next.js project with tailwind css as described in: https://tailwindcss.com/docs/guides/nextjs. Only difference is I used yarn create instead of npx.

I then modified the content to eliminate everything but the title like so:

Next, I went to add an underline class to the word "first". I saw no changes and verified the spelling. The class wasn't created.

Restarting the server wouldn't update it either.

Finally I read through the docs on underline and explicitly tried turning it on:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     textDecoration: true,
    }
  }

This did the trick.

I saw this: #4510.

The reproduction repo shows the above, however, if it is indeed a race condition it would be hard if not impossible to reliably reproduce. Best you (maintainers), can do is think of all the different systems involved and find a logical explanation. Once that happens, you can add code to mitigate the issue.

Hope this helps ❤️. Happy to answer any questions or try anything to make it work more reliably (I'll report back if I find more issues like this).

[yagudaev]

Quick update, I tried adding w-6 and w-32 classes today to my project and the classes didn't get generated.

My only workaround is turning off jit mode completely. Restarting the nextjs server didn't work either.

[bradlc]

Hey @yagudaev. Please could you try using the latest canary build (yarn add tailwindcss@canary -D)? Make sure to delete the .next folder after installing as well to ensure there's no cache hanging around.

[LoganDark]

Maybe Tailwind only gets re-run when the CSS file is updated (Jekyll also has this issue). Could you try touching the file and seeing if that fixes it?

The solution for me is to always use custom classes and @apply.

[vousys]

Maybe you have enable the JIT mode in your tailwind.config
I've to rollback and use it, without jit mode enabled.

[yagudaev]

Hey @yagudaev. Please could you try using the latest canary build (yarn add tailwindcss@canary -D)? Make sure to delete the .next folder after installing as well to ensure there's no cache hanging around.

@bradlc Canary build seems to work so far with jit enabled :). I'll try it for today and see how it works.

Maybe Tailwind only gets re-run when the CSS file is updated (Jekyll also has this issue). Could you try touching the file and seeing if that fixes it?

The solution for me is to always use custom classes and @apply.

@LoganDark There are no CSS files in the default template for next.js + tailwind (from the guide). I meant the CSS I can see in the browser in chrome dev tools, it doesn't have a w-8 class after I added it. This leads me to believe the JIT doesn't create the class under certain situations.

Maybe you have enable the JIT mode in your tailwind.config
I've to rollback and use it, without jit mode enabled.

I used the default settings from the template in the guide, didn't play with them. Only commented out JIT when things didn't work.

[psousasingular]

This is happening to me as well. Usually touching the tailwind.config.js file helps with the situations, other times it doesn't.
I'm using Jit mode. I'd be happy to share my tailwind config file or something else that might debug the situation.

[yagudaev]

@psousasingular after upgrading to canary I didn't have any issues. Except when I was trying to get another library to work and changed the postcss.config.js to use postcss.config.cjs to mark it as commonjs. It broke all my CSS and wouldn't generate a new CSS file until I deleted the .next folder.

Now I thought this wouldn't happen out in the wild. Using commonjs over esm style for config is a topic probably for another thread -- I admit I don't understand it deeply.

Bottom line, do you think we should keep this bug open? Perhaps if it only happens when changing the tailwind config like adding new colors or something, you (@psousasingular) could create a new bug to help the maintainers avoid having the read the full thread here?

If you are happy with that I can close this ticket (feel free to reference your new ticket here).

[psousasingular]

hi. I can't add any feedback on the canary version because I'm using the forms plugin which has a dependency on tailwind v2.
I do make extensive use of the config file with some extends and I even added my own plugins (which are at the moment private), I don't know if that can impact the jit compiler in any way.
My feeling is that the compiler somehow is not aware of my changes made on the files with fast refresh but this is just a suspicion, I don't have anything to back that up since I don't have inside knowledge on how fast refresh works in tandem with the JIT compiler and next. 😢

So, since I can't add anything on top of this, I think the ticket can be closed if it solved your case @yagudaev .

I'm also using next 10, tailwindcss 2.1.4, postcss 8.2.9.

Here's my tailwind.config.js

const myOwnUI = require('./src/myOwnUI/plugins/index.js')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  mode: 'jit',
  purge: [
    './src/myOwnUI/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
    './src/pages/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      sans: ['Roboto', ...defaultTheme.fontFamily.sans],
    },
    extend: {
      transitionProperty: {
        dimension: 'width, height',
        height: 'height',
        spacing: 'margin, padding',
      },
      colors: {
        brand: {
          DEFAULT: '#7B61FF',
        },
        critical: {
          DEFAULT: '#d0011b',
        },
        warning: {
          DEFAULT: '#ffc600',
        },
        positive: {
          DEFAULT: defaultTheme.colors.green[500],
        },
        neutral: {
          DEFAULT: '#9CA3AF', //text-gray-400
        },
        info: {
          DEFAULT: '#00194F',
        },
        promote: {
          DEFAULT: '#9556b7',
        },
        secondary: {
          50: '#EAF1FF',
          DEFAULT: '#00194F',
        },
        dark: {
          DEFAULT: '#374151', //text-gray-700
        },
      },
      maxWidth: {
        slim: '25%',
        wide: '100%',
        side: '240px',
      },
      formControl: {
        fontSize: '14px',
        lineHeight: '16px',
        paddingX: '24px',
        paddingY: '16px',
      },
      headings: {
        h1: {
          color: '#374151',
          fontWeight: 'normal',
          lineHeight: '1',
        },
        h2: {
          color: '#374151',
          lineHeight: '1',
        },
        h3: {
          color: '#374151',
          lineHeight: '1',
        },
        h4: {
          color: '#374151',
          lineHeight: '1',
        },
        h5: {
          color: '#374151',
          lineHeight: '1',
        },
        h6: {
          color: '#374151',
          lineHeight: '1',
        },
      },
      buttons: {
        sizes: {
          sm: {
            lineHeight: '16px',
            paddingX: '16px',
            paddingY: '8px',
          }, 
        },
        variants: {
          inverse: {
            color: defaultTheme.colors.red[300],
            colorHover: defaultTheme.colors.red[500],
            borderColor: defaultTheme.colors.red[300],
            backgroundColor: 'transparent',
            backgroundColorHover: defaultTheme.colors.white,
            focusColor: defaultTheme.colors.red[300],
            borderStyle: 'solid',
            borderWidth: '2px',
          },
        },
        default: {
          borderRadius: '6px',
        },
      },
    },
  },
  variants: { extends: {} },
  plugins: [
    require('@tailwindcss/forms'),
    myOwnUI.plugins.headings,
    myOwnUI.plugins.formControl,
    myOwnUI.plugins.text,
    myOwnUI.plugins.label,
    myOwnUI.plugins.button,
  ],
}

[yagudaev]

@psousasingular it should land in 2.2.0 so keep an eye out for that. You might need to fork these projects and upgrade the dependencies or use https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

[yagudaev]

@psousasingular too late looks like Adam beat us :). 2.2.0 is out now: https://twitter.com/adamwathan/status/1405563122954481670