Issue with Tailwind CSS

[karakaiyuliia]

Cypress does not work with Tailwind CSS. I was following the setup in this repo and none of the suggested setups work for me, they all result in the below error when simply trying to mount a component.

I compiled my tailwind css using tailwindcss -i src/tailwind.css -o src/index.css
In my component.js:

import '../../src/index.css';

import { mount } from 'cypress/react'

Cypress.Commands.add('mount', mount)

In cypress.config.js:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
    component: {
        supportFile: 'cypress/support/component.js',
        devServer: {
            framework: 'next',
            bundler: 'webpack',
        },
    },
})

And my test:

import React from 'react';
import MyComponent from "./page";

describe('mycomponent', () => {
    it('renders', () => {
        cy.mount(<MyComponent/>)
    })
})

I am using React, Next.js and Tailwind.

[barak-kovrr]

What worked for me is to add the following code to styles.ts:

// Prevent Next.js CSS insertion error
if (!document.querySelector('#__next_css__DO_NOT_USE__')) {
  const styleNode = document.createElement('style');
  styleNode.id = '__next_css__DO_NOT_USE__';
  document.head.appendChild(styleNode);
}

export {};

and then import this file in component.ts