Getting Compile Error When Adding @tailwindcss/ui Plugin to tailwind.config.js

[roberttravispierce]

I'm adding TailwindUI to my project. I followed the documentation, brought in an example form, and added the CDN version just to do a quick check—All went well. Then moved on to adding the @tailwindcss/ui plugin to my tailwind.config.js file, instead of the CDN. Now I'm getting a compile error:

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: variantGenerators[variant] is not a function
    at /Users/robertpierce/dev/test_project/app/javascript/stylesheets/application.scss:1019:1
    at /Users/robertpierce/dev/test_project/node_modules/tailwindcss/lib/lib/substituteVariantsAtRules.js:93:35
    at arrayEach (/Users/robertpierce/dev/test_project/node_modules/lodash/lodash.js:516:11)
    at Function.forEach (/Users/robertpierce/dev/test_project/node_modules/lodash/lodash.js:9342:14)
    at /Users/robertpierce/dev/test_project/node_modules/tailwindcss/lib/lib/substituteVariantsAtRules.js:92:23
    at /Users/robertpierce/dev/test_project/node_modules/postcss/lib/container.js:310:16
    at /Users/robertpierce/dev/test_project/node_modules/postcss/lib/container.js:135:18
    at Root.each (/Users/robertpierce/dev/test_project/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/Users/robertpierce/dev/test_project/node_modules/postcss/lib/container.js:131:17)
    at Root.walkAtRules (/Users/robertpierce/dev/test_project/node_modules/postcss/lib/container.js:308:17)
    at /Users/robertpierce/dev/test_project/node_modules/tailwindcss/lib/lib/substituteVariantsAtRules.js:80:9
ℹ ｢wdm｣: Failed to compile.

Here's my tailwind.config.js file:

module.exports = {
  // All the default values will be compiled unless they are overridden below
  theme: {
    // Extend (add to) the default theme in the `extend` key
    extend: {
      colors: {
        brand: {
          "lighter": "#36A5D4",
          "lightest": "#68BBDF",
          "default": "#048dca",
          "darker": "#0372A1",
          "darkest":"#025579",
          "brown-900":"#110502",
          "brown-700":"#411D0B",
          "brown-600":"#6E351B",
          "brown-500":"#815446",
          "brown-400":"#A58B81",
          "brown-200":"#EDD6B8",
          "gold-100":"#FCF9EE",
          "gold-300":"#F8CC77",
          "gold-500":"#EC9E36",
          "gold-700":"#B35F27",
        },
        status: {
          "go": "#2dc937",
          "caution": "#e7b416",
          "stop": "#cc3232",
          "recorded": "#2dc937",
          "scheduled": "#e7b416",
          "recording": "#cc3232"
        },
        "primary-200": "#eef1ff",
        "primary-500": "#4965f6",
        "primary-600": "#1231d0",
        "secondary-200": "#e3f6ed",
        "secondary-500": "#3ecf8e",
        "secondary-600": "#36b47c",
        "tertiary-200": "#eeeeee",
        "tertiary-500": "#57586e",
        "tertiary-600": "#3a3b48",
        "danger-200": "#fff3f3",
        "danger-500": "#F37B7B",
        "danger-600": "#d26969",
        "code-400": "#fefcf9",
        "code-600": "#3c455b",
      },
    },
    // override the default theme using the key directly
    fontFamily: {
      sans: [
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Roboto",
        '"Helvetica Neue"',
        "Arial",
        '"Noto Sans"',
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
    },
  },
  plugins: [
    require('@tailwindcss/ui'),
  ],
}

I can't figure out what's going on. I've come up empty with the normal googling & troubleshooting rodeo (reinstalling all node_modules, etc.)

Help?

[roberttravispierce]

Here's my postcss.config.js file:

let environment = {
  plugins: [
    require('tailwindcss')('app/javascript/stylesheets/tailwind.config.js'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
  ]
}

if (process.env.RAILS_ENV === "production" || process.env.RAILS_ENV === "staging") {
  // A whitelist of css classes to keep that might not be found in the app
  function collectWhitelist() {
    return ['font-serif', 'tab-active', 'transition', 'text-gray-400', 'bg-twitter', 'bg-facebook', 'bg-google_oauth2', 'text-twitter', 'text-facebook', 'text-google_oauth2', 'video-js'];
  }

  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: ['./**/*.html.erb', './**/*.html.haml', './app/helpers/**/*.rb'],
      defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || [],
      whitelist: collectWhitelist(),
      whitelistPatterns: [/^vjs-/],
      whitelistPatternsChildren: [/trix/, /attachment/, /tribute/, /tippy/],
    })
  )
}

module.exports = environment

[carltonsmith]

I'm having the same issue

[simonswiss]

Hey! 👋

I suspect the reply below by Adam is what causes your issue.

If not, could you please share a link to a reproduction of the issue on a GitHub repo or Tailwind Play example?

[adamwathan]

Make sure you are on the latest version of Tailwind 👍🏻 Sounds like maybe you are on an older version that is missing a variant that Tailwind UI expects.

[grshane]

I have run into this issue as well and @adamwathan's reply didn't work for me. https://github.com/grshane/p2stencil