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 CSSSince 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).
import "../src/index.css";import React from "react";
export const Wrapper = React.Fragment;
#
PostCSS / TailwindIf 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.