Cypress component tests for Nuxt with Tailwind

Question

I'm trying to set up Cypress component tests for a Nuxt app. It works, but almost none of my styles are working, because they depend on Tailwind together with my custom tailwind.config.js.

This is my cypress/plugins/index.js:

const { startDevServer } = require('@cypress/webpack-dev-server');
const { getWebpackConfig } = require('nuxt');

module.exports = (on, config) => {
  on('dev-server:start', async (options) => {
    const webpackConfig = await getWebpackConfig();
    return startDevServer({
      options,
      webpackConfig,
    });
  });
  return config;
};

How can I include Tailwind with a custom config? And while we're at it: how do I include an extra global .scss files in all my component tests?

Answer 1

You can get your styles to work by importing them directly into your test files, like so:

// YourComponent.spec.js
import 'tailwindcss/dist/tailwind.min.css'
import '@/assets/css/tailwind.css'

I'm looking into a method to add these styles globally as well, so if I find something I'll make sure to post it here.

---

Updated answer

Add the following to your build settings in your nuxt.config.js file.

// nuxt.config.js

import { join } from 'path'

...

plugins: {
  tailwindcss: join(__dirname, 'tailwind.config.js'),
  ...
},

If you have jit mode enabled for tailwindcss, make sure to add the appropriate purge paths to your tailwind config. With me it was loading in an infinite loop, after specifying these paths more specific it was sorted out. Also see tailwind docs.

// tailwind.config.js

purge: [
  './components/**/*.vue', 
  './layouts/**/*.vue', 
  './pages/**/*.vue'
],