CSS

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.

However, you may need some minimal set-up for global CSS to work.

Global CSS

Since Preview.js renders components in isolation, it doesn't run any top-level entry points that you may have set up in your app.

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

// __previewjs__/Wrapper.tsx

import "../src/index.css";
import React from "react";

export const Wrapper = React.Fragment;

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.