`vue-essentials` conflict with TailwindCSS

Developing with Prismic
5

I think this should solve it. Nuxt defaults to have a purgeCSS module (I noticed from the build logs), so I have set that to whitelist every CSS class with the return content.match(/.*/g) in the nuxt.config.js below.

Also, here is the correct tailwind.config.js - If you have .vue files anywhere else, add them as per this pattern to the content section:

// tailwind.config.js
module.exports = {
  purge: {
    content: [
      './pages/**/*.vue',
      './components/**/*.vue',
      './layouts/**/*.vue',
      './slices/**/*.vue',
    ],
  },
  theme: {},
  variants: {},
  plugins: [],
}

Your nuxt.config.js should look like this (based off your template):

// nuxt.config.js
export default {
  mode: 'universal',

  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      }
    ],
    script: [
      {
        src:
          'https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList'
      },
      {
        src:
          'https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js'
      }
    ]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: {
    color: '#fff'
  },

  /*
   ** Global CSS
   */
  css: ['vue-essential-slices/src/styles/styles.scss'],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],

  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module', // 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',
    [
      '@nuxtjs/prismic',
      {
        endpoint: 'https://fakeprismicrepo.cdn.prismic.io/api/v2',
        apiOptions: {
          routes: [
            {
              type: 'page',
              path: '/:uid'
            }
          ]
        }
      }
    ],
    ['nuxt-sm']
  ],

  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},

    transpile: ['vue-slicezone', 'nuxt-sm'],

    postcss: { // <-- Added
      plugins: [
        require('tailwindcss'),
        require('autoprefixer')
      ]
    }
  },

  purgeCSS: { // <-- Added
    extractors: () => [
      {
        extractor (content) {
          return content.match(/.*/g)
        },
        extensions: ['vue']
      }
    ]
  }
}

I hope this helps! Let me know if it still doesn’t work, and I can have another look.

1 Like