{
  "id": "7c840352253cb9eece2b70b9",
  "source": "solid:signals",
  "type": "github-document",
  "title": "styling-your-components",
  "content": "---\ntitle: Styling your components\norder: 1\nuse_cases: \u003e-\n  styling components, choosing css solutions, css frameworks, preprocessors,\n  css-in-js\ntags:\n  - styling\n  - css\n  - preprocessors\n  - css-in-js\n  - frameworks\nversion: '1.0'\ndescription: \u003e-\n  Explore Solid's flexible styling options: CSS preprocessors, CSS Modules,\n  CSS-in-JS, and utility frameworks for component styling needs.\n---\n\nSolid provides flexible and versatile ways to style your components.\n[`class` and `style` bindings](/concepts/components/class-style) can both be added to dynamically style components with plain CSS.\nSolid also supports a range of styling methods - from traditional CSS preprocessors to modern CSS-in-JS solutions - ensuring the flexibility to choose the best approach for your projects.\n\n## CSS preprocessors\n\n\u003cdiv class=\"flex flex-col md:grid md:grid-cols-2 md:grid-rows-1  gap-3\"\u003e\n\n\u003cImageLinks title=\"SASS\" href=\"/guides/styling-components/sass\" logo=\"sass\" /\u003e\n\u003cImageLinks title=\"LESS\" href=\"/guides/styling-components/less\" logo=\"less\" /\u003e\n\n\u003c/div\u003e\n\nSASS\nLESS\n\n## CSS modules\n\n\u003cImageLinks\n\ttitle=\"CSS Modules\"\n\thref=\"/guides/styling-components/css-modules\"\n\tlogo=\"cssmodules\"\n/\u003e\n\n## CSS-in-JS\n\nCSS-in-JS is a modern approach to styling components.\nWithin the [Solid ecosystem](https://www.solidjs.com/ecosystem), there are various libraries and solutions available for working with CSS-in-JS, including but not limited to:\n\n- [Solid Styled Components](https://github.com/solidjs/solid-styled-components)\n- [Solid Styled JSX](https://github.com/solidjs/solid-styled-jsx)\n\nCSS-in-JS libraries often come with their own set of APIs and methods for defining, updating, and applying styles dynamically.\nMany also offer features like theming, media queries, and server-side rendering support right out of the box.\n\n**Note:** Before choosing a CSS-in-JS library, it is recommended to check its compatibility with Solid.\n\n### Macaron\n\n\u003cImageLinks\n\ttitle=\"Macaron\"\n\thref=\"/guides/styling-components/macaron\"\n\tlogo=\"macaron\"\n/\u003e\n## CSS frameworks\n\nCSS frameworks provide pre-styled components and utility classes to speed up development.\n\n\u003cdiv class=\"flex flex-col md:grid md:grid-cols-2 md:grid-rows-1  gap-3\"\u003e\n\n\u003cImageLinks\n\ttitle=\"Tailwind CSS\"\n\thref=\"/guides/styling-components/tailwind\"\n\tlogo=\"tailwind\"\n/\u003e\n\u003cImageLinks title=\"UnoCSS\" href=\"/guides/styling-components/uno\" logo=\"uno\" /\u003e\n\n\u003c/div\u003e",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-your-components.mdx",
  "metadata": {
    "path": "src/routes/guides/styling-your-components.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2386,
    "source_type": "github"
  },
  "hash": "b03109e0bf78d1fd8e1748206087f0fcc7101008c6f689d1f209e66f13eb98bf",
  "timestamp": "2026-02-23T11:43:00.188203076+01:00"
}