Add this to /examples/with-tailwindcss documentation?

[agstover]

Was trying to integrate StorybookJS with the base TailwindCSS example and was running into an invalid PostCSS config issue. Took me a while to figure out, but I found the issue here. Solution is below.

Don't know if your goal is to try to keep all of the ReadMe of the examples very narrowly scoped to the libraries involved, but it seems like Storybook + Tailwind would be a pretty common combo and NextJS using its special way of listing PostCSS plugins w/out require() immediately breaks Storybook, so maybe it could save people time to just make note of the fact that PostCSS with NextJS does this and integrating it with other libraries that don't understand it could break and can be fixed by doing this.

If this seems like something that would be merged in, then I can do it and create a pull request. Otherwise just a suggestion that putting problem solving tips that pop up like this at the fountainhead of the template could save people some time.

// Broken config
module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ],
}

// Fixed config
module.exports = {
  plugins: {
    'tailwindcss':{},
    'postcss-flexbugs-fixes':{},
    'postcss-preset-env':  
      {
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
          features: {
            'custom-properties': false,
          },
      },
  }
}

[gregrickaby]

@agstover I just spent the better part of the day looking into the same issue 😢 Thank you for sharing the solution. It works! 👏🏻

Storybook was throwing the PostCSS error in the console, not Next.js...so the meaningful error message was not being displayed.

I think both the Storybook and TailwindCSS examples should probably have a section in the README about needing to write their respective postcss.config.js using the alternate format. The section could read like this:

postcss.config.js

If you want to leverage other dependencies that require a postcss.config.js (like TailwindCSS), you'll need to use the object based format when creating your postcss.config.js. For example:

// postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss':{},
    'postcss-flexbugs-fixes':{},
    'postcss-preset-env':  
      {
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
          features: {
            'custom-properties': false,
          },
      },
  }
}

Let me know if I can help with the PR, and thanks again! 👏🏻