Skip to main content

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 React Preview renders components in isolation, it doesn't run any top-level entry points that you may have set up in your app. This means that you will need to explicitly import any global CSS from your screenshots.

In order to import global CSS, you can set up a wrapper component. By default, the wrapper should be named __reactpreview__/Wrapper.tsx, however this can be customised (see Wrapper).

/__reactpreview__/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:

/postcss.config.js
module.exports = {  plugins: {    tailwindcss: {},    autoprefixer: {},  },};

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