React with TailwindCSS

[vicainelli]

Does anyone know how can I load the TailwindCSS from the testing files?

I've tried to use the same approach I used on VueJS, importing the css file, but it does just not load the styles.

Here's the commit where I added the cypress component testing
vicainelli/cypress-component-testing-react-tailwindcss@2fa2583

[mufasa71]

in mount there are options you can pass, one of theme is stylesheet, for example

mount(<App />, { stylesheet: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" });

[vicainelli]

Yeah, this works fine, thanks!

But I would like to make it work with the local css file, because there are some custom properties.

[mufasa71]

For custom you can do the same but with slightly different approach:

Build your css:

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

Run server:

npx serve ./dist

And change mount:

mount(<App />, { stylesheet: "http://localhost:3000/tailwind.css" });

But I am pretty sure there could be better approach than this.

[JessicaSachs]

We do support importing css from the spec file. It should work exactly like it does in your source code.

[JessicaSachs]

Tailwind is getting loaded, but it's not being transpiled.

You need to pass in your craco config. See our craco example here https://github.com/cypress-io/cypress/blob/bcefdaba6d6fc9705eeb5aef8b2711379bbb72b6/npm/react/examples/craco/cypress/plugins/index.js#L1-L9

[vicainelli]

Hey, Jessica, thanks.

I did exacly this.

Firstly I tried a temporary fix by adding the compiled TailwindCSS style.

And now I'm using this one, by adding Craco on Cypress plugins file.

Btw, there's a typo error on Cypress docs.

Should be:

require('tailwindcss/dist/tailwind.min.css')

Instead of:

require('tailwindcss/dist/tailwindcss.min.css')

[JessicaSachs]

Thanks for the catch.

[JessicaSachs]

Fixed cypress-io/cypress-documentation#4069