cypress
cypress copied to clipboard
cypress-io
Support JIT compiler for tailwindcss in component testing
We need to support the new JIT compiler for tailwind which dramatically reduces the filesize for tailwind so that Cypress can load it much more performantly.
See https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
What would you like?
Why is this needed?
Tailwind bundles are around 5.5MB compiled. Cypress struggles with this. Storybook supports @tailwindcss/jit to make tailwind performant.
Hi, here is the Playground https://github.com/gisu/nuxt-composition-api-test (Nuxt, Cypress, Tailwind with PostCSS).
I generate the CSS for Cypress using npm run generatestyle. This generates all Tailwind base classes, 3.2 MB and Cypress is already struggling with this before the start of the test.
For running projects, the unabridged Tailwind CSS file can be up to 5 - 10 MB in size.
I managed to get the JIT compiler working for my project. I found this inside the Tailwind documentation which helped me:
Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise your CSS will be empty.
I haven't proof tested it yet but it has been working fine for me.
Cypress component testing (UI) start-up time: Without JIT: 7299ms With JIT mode on: 3645ms
From what I could observe when using Cypress component testing, Vitejs and TailwindCSS in JIT mode: JIT works on initial cypress open. After introducing new classes in tests, the stylesheet is not recompiled and a full Cypress reload is required.
I managed to get the JIT compiler working for my project. I found this inside the Tailwind documentation which helped me:
Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise your CSS will be empty.
I haven't proof tested it yet but it has been working fine for me.
Cypress component testing (UI) start-up time: Without JIT: 7299ms With JIT mode on: 3645ms
How did you do that? Can you share project?
I managed to get the JIT compiler working for my project. I found this inside the Tailwind documentation which helped me:
Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise your CSS will be empty.
I haven't proof tested it yet but it has been working fine for me. Cypress component testing (UI) start-up time: Without JIT: 7299ms With JIT mode on: 3645ms
How did you do that? Can you share project?
Unfortunately I can't share the project as it is a work for a client. The fix for me was to configure the purge option of the tailwind config file. Do you have a repository of your project which I can have a look at?
@LarsFlieger, this StackOverflow answer describes how to compile the Tailwind classes on the fly for component tests, using the Cypress before hook.
Still, it would be nice if Cypress supported this directly.
Tailwind JIT should be supported and configurable via your dev server.
If there is an issue with Tailwind JIT and CT, please post a reproduction and we can reopen this.
