`vue-essentials` conflict with TailwindCSS

Developing with Prismic
1

I am using the latest version of Tailwind ^1.0.0, which seems to remove the component CSS style in the vue-essentials components on production (generate) only. They work together fine in the dev build. I thought it might be the TailwindCSS purge removing the component vue-essentials style but I set the Tailwind config to the following:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  purge: {
    enabled: false,
    content: ['./src/**/*.html']
  }
}

It seems to import the global css fine. Here is my 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']
  },
  tailwindcss: {
    exposeConfig: true
  }
}

I hope this is a common thing so that I can easily fix it.

image
image1726×872 101 KB

1 Like
2

Why is your content referencing .html files? I presume they should be .vue files.

Also, you could try setting the purge value to just disabled, rather than having the content key too, as that may override it.

purge: {
  enabled: false,
}
3

Hi @marcellothearcane, I think I was at the point where I was pasting anything.

It is clearly TailwindCSS that is causing the conflict, rather than vue-essentials because it is happening with other external components but it still happens when I set:

   purge: {
    enabled: false
  }

Edit: It seems to be that I can still add styles to the navigation component (which isn’t using slice zone). I wonder what Slice Machine and Tailwind don’t like about each other. Perhaps the path?

4

Everything points to tailwind, since you also say everything works fine in dev. (Tailwind only purges in production).

I’ve made a test repository with tailwind, so I’ll see how that goes. First up, when I run the build command, I get lots of this message:
image

Did you get this too?

Edit: Seems like the above is fairly inconsequential. But I have success! I’ve managed to stop all CSS purging (I think CSS is purged by two independent things, which means tailwind knocks out everything apart from tailwind, and something else does the same to tailwind).

Let me work out what I’ve done, and I’ll reply with some instructions hopefully!

I take it you want tailwind to work, but not the default slice machine classes?

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
6

Thanks @marcellothearcane, I came to the same conclusion. Initially, I wanted to use it to test the viability and structure of how best to do my own slices so that when SM becomes more developed I can quickly adapt. In the end I decided against using the vue-essentials-slices slices and I am just using custom ones but still using Slice Machine.

It was definitely Tailwind’s purgeCSS (first time using the v1 !) and was because I hadn’t included the content (as you describe). This was my tailwind.config.js in the end:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  // purge: false,
  purge: {
    enabled: true,
    // mode: postcss,
    content: [
      './slices/**/*.vue',
      './node_modules/swiper/**/*.js',
      './node_modules/vue-awesome-swiper/**/*.js',
      './node_modules/vue-awesome-swiper/**/*.ts',
      './components/**/**.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
      './node_modules/swiper/js/swiper.esm.js'
    ],
    options: {
      whitelistPatterns: [/^swiper/],
      whitelistPatternsChildren: [/^swiper/]
    }
  }
  // purge: ['./slices/**/*.vue']
}

Now the CSS is super small but still have the advantage of Tailwind’s utility classes.

I think I will probably nab your postcss plugins. Autoprefixer would be nice. :smirk:

3 Likes