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.