Devour/devour_data/docs/css-and-styling.json

{
  "id": "b6ebaeb935e7ce1b60bce9a3",
  "source": "solid:signals",
  "type": "github-document",
  "title": "css-and-styling",
  "content": "---\ntitle: CSS and styling\nuse_cases: \u003e-\n  styling components, css modules, scoped styles, component styling, design\n  system setup, visual customization\ntags:\n  - css\n  - styling\n  - modules\n  - components\n  - design\n  - vite\nversion: '1.0'\ndescription: \u003e-\n  Style your SolidStart components with CSS, CSS modules, and other styling\n  solutions. Implement scoped styles and design systems.\n---\n\nSolidStart is a standards-based framework that, instead of modifying the behavior of the [`\u003cstyle\u003e` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style), strives to build on top of it.\n\n## Styling components\n\nVite provides a simple way to [manage CSS for complex web applications](https://vitejs.dev/guide/features.html#css).\nIt does this by allowing users to import CSS using ESM syntax anywhere within the component tree.\nFor example, you can write CSS in a file accompanying your component file:\n\n```\nsrc/\n├── components/\n│   ├── Card.tsx\n│   ├── Card.css\n```\n\nTo use the CSS in the component, you can define the CSS in the `Card.css` file and import it in the `Card.tsx` file:\n\n```css title=\"Card.css\"\n.card {\n  background-color: #446b9e;\n}\n\nh1 {\n  font-size: 1.5em;\n  font-weight: bold;\n}\n\np {\n  font-size: 1em;\n  font-weight: normal;\n}\n```\n\n```tsx title=\"Card.tsx\"\nimport \"./Card.css\";\n\nconst Card = (props) =\u003e {\n  return (\n    \u003cdiv class=\"card\"\u003e\n      \u003ch1\u003e{props.title}\u003c/h1\u003e\n      \u003cp\u003e{props.text}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### CSS modules for scoped styles\n\nSolidStart also supports [vite's CSS modules](https://vitejs.dev/guide/features.html#css-modules).\nThrough [CSS modules](https://github.com/css-modules/css-modules), you can scope certain CSS to a component and use the CSS class in multiple components to style them differently.\n\nFor this feature to work, the `.css` file must be named with the `.module.css` extension.\nThis convention also works for `.scss` and `.sass` files, which can be named with the `.module.scss` and `.module.sass` extensions, respectively.\n\n```css title=\"Card.module.css\"\n.card {\n  background-color: #446b9e;\n}\n\ndiv.card \u003e h1 {\n  font-size: 1.5em;\n  font-weight: bold;\n}\n\ndiv.card \u003e p {\n  font-size: 1em;\n  font-weight: normal;\n}\n```\n\nWhen first using CSS modules, you will encounter an error when trying to use the class attribute in your components.\nThis is because, behind the scenes, classes defined in CSS modules are renamed to a series of random letters.\nWhen classes are hard coded using the class attribute (`class=\"card\"`), Solid is not aware that it should rename `card` to something different.\n\nTo fix this, you can import classes used in your CSS module.\nThe import object can be thought of as `humanClass: generatedClass` and within the component, the key (ie. the class on the element) is used to get the unique, generated class name.\n\n```jsx\nimport styles from \"./Card.module.css\";\n\nconst Card = (props) =\u003e {\n  return (\n    \u003cdiv class={styles.card}\u003e\n      \u003ch1\u003e{props.title}\u003c/h1\u003e\n      \u003cp\u003e{props.text}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Other ways to style components\n\nSolidStart is built on top of Solid, meaning styling is not limited to CSS.\nTo see other ways to style components, see the [styling section in the Solid documentation](/guides/styling-your-components).",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/css-and-styling.mdx",
  "metadata": {
    "path": "src/routes/solid-start/building-your-application/css-and-styling.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3265,
    "source_type": "github"
  },
  "hash": "78fa9cf5393606a087d6d8583fab72393b955d09be4b51c3099ec7050f88283e",
  "timestamp": "2026-02-23T11:43:00.193790868+01:00"
}