Thanks to a strong foundation provided by Vite, most CSS-in-JS libraries will work out of the box, as well as plain CSS imports and CSS modules.

Global CSS

Preview.js looks for global CSS files such as style.css or global.scss, but this is a best-effort strategy.

In order to explicitly import global CSS, you can set up a wrapper file:

// __previewjs__/Wrapper.tsx

import "../src/index.css";

PostCSS / Tailwind

If your CSS relies on PostCSS, it will be picked up as long as your project has a postcss.config.js file.

For example for Tailwind, here is the required configuration:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},

You should also make sure that you import the global CSS as explained above.