Tailwindcss-module: Support for tailwindUI?

[connecteev]

Thanks to the nuxt community for this repo.

I am facing an issue, however - has it been tested with and does it support tailwindUI?
https://tailwindui.com/documentation#getting-set-up

TailwindUI requires changes to the postcss config:
https://tailwindui.com/documentation#update-your-purgecss-configuration

But changes to the postcss config are deprecated by nuxt: https://nuxtjs.org/faq/postcss-plugins/
So I'm confused as to how to make changes to a postcss config with nuxt. Is there an example of how to configure tailwindUI with nuxt? Thanks in advance..

[connecteev]

Here's how to do it:

nuxt.config.js:

  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
  ],
  /*
   * See https://github.com/nuxt-community/tailwindcss-module#configuration
   */
  tailwindcss: {
    configPath: '~/tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
    purgeCSSInDev: true,
    exposeConfig: false
  },
  /*
   * See https://purgecss.com/guides/nuxt.html#nuxt-js-plugin
   * Modified based on tailwindUI settings: https://tailwindui.com/documentation#update-your-purgecss-configuration
   */
  purgeCSS: {
    mode: "postcss",
    enabled: ({ isDev, isClient }) => (!isDev && isClient), // or `false` when in dev/debug mode
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js'
    ],
    styleExtensions: ['.css'],
    whitelist: ['body', 'html', 'nuxt-progress'],
    extractors: [
      {
        // replace original config with that required by tailwindUI
        // extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
        extractor: content => content.match(/[\w-/.:]+(?<!:)/g) || [],
        extensions: ['html', 'vue', 'js']
      }
    ]
  },

tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    prefix: 'tw-',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/ui')({
      // See https://tailwindui.com/documentation#configuring-sidebar-breakpoints
      // Turning this off for now. This may be buggy as it makes the hero sections like the "with wide angled image on right" look funky
      // https://tailwindui.com/components/marketing/sections/heroes
      // layout: 'sidebar',
    })
  ]
}