Tailwind

[anthony-bernardo]

Is it possible to integrated tailwind ?

I tried, but I have some issue with postcss

CssSyntaxError: [postcss] /index.html?html-proxy&index=0.css:759:1: Unknown word

I tried :

tailwindcss -i ./src/styles/App.css -o ./.vitest-preview/tailwind-output.css --autoprefixer

and in my test-setup.ts

import './.vitest-preview/tailwind-output.css'

[nknapp]

I have used it with tailwind successfully. I don't know exactly what your problem is, maybe if you post a minimal example I can have a look.

But I think you don't need to call the tailwindcss tool at all. Just do

import  "./styles/App.css"

in your test-setup.ts. Vitest-preview should automatically call post-css and therefore tailwind.

[nknapp]

I have to add a caveat to my comment: When I used add the import to the test-setup in our project, the tests started to run significantly slower.

That's why, I created a separate file with a function showMe calling debug() and in that module I imported all the css. Then, I used showMe instead of debug to render the DOM.

After all, you only need the CSS if you want to debug the test, not otherwise.

I have an example repository that I also use in my talks: https://github.com/nknapp/frontend-testing/blob/main/src/test-utils/showMe.test-helper.ts

It does not use tailwind, but showcases the showMe function.

[tarjei]

What would be nice was a vitest config option to add one static css import to the generated html.

Then you could have something like:

function debug() {
  createCacheFolderIfNeeded();
  const head = document.documentElement.querySelector('head');
  
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = '/all.css';
  head.appendChild(link);

  fs.writeFileSync(
    path.join(CACHE_FOLDER, "index.html"),
    document.documentElement.outerHTML
  );
}

and

...
  app.use(vite.middlewares);
  app.use('/all.css', express.static(path.join(CACHE_FOLDER, 'all.css')));
  app.use("*", async (req, res, next) => {
...

This is just from me testing this by hacking on the files in my node_modules directory and generating an all.css file.

[nvh95]

If your vite project can process tailwind with vite config, probably vitest can process tailwindcss as well. Otherwise, please help to add a minimal reproduction, and feel free to reopen this issue

What would be nice was a vitest config option to add one static css import to the generated html. https://www.vitest-preview.com/guide/api/configure#externalcss