CSS

Learn how to style your components using Tailwind CSS, CSS files, and injection components

Codespark provides several ways to use CSS to style your components in the preview sandbox:

Tailwind CSS
Import CSS files directly
Use injection component

Tailwind CSS

Codespark supports full Tailwind CSS v4 features for styling out of the box. You can use any Tailwind class name on the components you want to preview.

App.tsx

Disable / Enable

You can disable or enable Tailwind CSS capability by setting tailwindcss prop.

< tailwindcss={false} />              
tailwindcss?: boolean | undefined
Whether to enable Tailwind CSS support in the preview
@defaulttrue

Import CSS files

Based on Codespark's multi-file system, you can import .css files directly. They will be transformed into <style> elements and appended to the preview iframe's <head> element.

App.tsx

In some cases, your .css file may contain Tailwind CSS directives, like @theme, @custom-variant, etc. If you want this compiled by Tailwind, you need to change your CSS file's extension to .tw.css.

Style tags generated in this way will have the attribute type="text/tailwindcss" added, which allows them to be recognized by Tailwind.

App.tsx

Injection Components

Codespark provides a Style component called "injection component" for runtime styling.

Just like using a <style> tag in HTML markup, pass this component as children and it will be automatically injected into the <head> element.

<Codespark code={code}>
  <Style>some css style code</Style>
</Codespark>

import { Codespark, Style } from '@codespark/react';

const CUSTOM_STYLE = `
#my_button {
  height: 24px;
  padding: 6px 12px;
  background: #000;
  color: #fff;
  border-radius: 6px;
  box-sizing: content-box;
  cursor: pointer;

  &:hover {
    background: rgba(0, 0, 0, 0.65);
  }
}`;

const code = `export default function App() {
  return <button id="my_button">My Button</button>;
}`;

export default function App() {
  return (
    <Codespark code={code}>
      <Style>{CUSTOM_STYLE}</Style>
    </Codespark>
  );
}

Tailwind CSS

Disable / Enable

Import CSS files

Tailwind flag

Injection Components

On this page