CSS

Preview.js supports CSS imports out of the box.

You can import CSS files in your components directly:

import "./styles.css";

You can also import CSS files in your wrapper component to apply global styles:

// __previewjs__/Wrapper.tsx
import "../src/styles.css";

export function Wrapper({ children }) {
  return <div>{children}</div>;
}

CSS Modules

CSS Modules are supported out of the box.

/* Button.module.css */
.button {
  background: blue;
  color: white;
}

import styles from "./Button.module.css";

export function Button() {
  return <button className={styles.button}>Click me</button>;
}

SASS/SCSS

SASS/SCSS is supported out of the box.

/* styles.scss */
$color: blue;

.button {
  background: $color;
  color: white;
}

import "./styles.scss";

LESS

LESS is supported out of the box.

/* styles.less */
@color: blue;

.button {
  background: @color;
  color: white;
}

import "./styles.less";

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.