mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
3.1 KiB
JSON
17 lines
3.1 KiB
JSON
{
|
|
"id": "f33edea6744ff59168b4a271",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "tailwind",
|
|
"content": "---\ntitle: Tailwind CSS\norder: 5\nmainNavExclude: true\nuse_cases: \u003e-\n styling components, utility classes, rapid ui development, responsive design,\n production builds\ntags:\n - styling\n - css\n - tailwind\n - postcss\n - utilities\n - design\nversion: '1.0'\ndescription: \u003e-\n Set up Tailwind CSS v4 in your Solid app for utility-first styling. Configure\n PostCSS, import styles, and build responsive UIs efficiently.\n---\n\n:::note\nThis guide is for Tailwind CSS v4. For **Tailwind CSS v3** refer to [Tailwind CSS v3](/guides/styling-components/tailwind-v3).\n:::\n\n[Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin.\n\n## Installation\n\n1. Install Tailwind CSS as a development dependency:\n\n```package-install-dev\ntailwindcss @tailwindcss/postcss postcss\n```\n\n2. Add `@tailwind/postcss` to the `plugins` in your PostCSS configuration. If you do not have a PostCSS configuration file, create a new one called `postcss.config.mjs`.\n\n```js title=\"postcss.config.mjs\"\nexport default {\n\tplugins: {\n\t\t\"@tailwindcss/postcss\": {},\n\t}\n}\n```\n\nFor a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration).\n\n## Import Tailwind CSS\n\nAdd an `@import` to your `src/index.css` file that imports Tailwind CSS.\n\n```css title=\"src/index.css\"\n@import \"tailwindcss\";\n```\n\n## Import your CSS file\n\nImport your `index.css` file into the root `index.jsx` or `index.tsx` file:\n\n```jsx\nimport { render } from \"solid-js/web\"\nimport App from \"./App\"\nimport \"./index.css\"\n\nrender(() =\u003e \u003cApp /\u003e, document.getElementById('root') as HTMLElement);\n```\n\n## Usage\n\nWith Tailwind CSS set up, you can now utilize its utility classes.\nFor instance, if you previously had a `Card.css` file, you can replace or remove it:\n\n```\n/* src/components/Card.css */\n/* Remove or replace these styles with Tailwind utility classes */\n```\n\nUpdate your components to use Tailwind's utility classes:\n\n```jsx\n/* src/components/Card.jsx */\nfunction Card() {\n\treturn (\n\t\t\u003cdiv class=\"grid place-items-center min-h-screen\"\u003e\n\t\t\t\u003cdiv class=\"h-[160px] aspect aspect-[2] rounded-[16px] shadow-[0_0_0_4px_hsl(0_0%_0%_/_15%)]\"\u003e\n\t\t\t\tHello, world!\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Support\n\nFor additional assistance, refer to the [Tailwind CSS/Vite integration guide](https://tailwindcss.com/docs/guides/vite).",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/tailwind.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/guides/styling-components/tailwind.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2413,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "4e25f3faa8260d74cecada2bcfee28d92c0fa53a5d4386c40006b9e569f69da7",
|
|
"timestamp": "2026-02-23T11:43:00.188141841+01:00"
|
|
} |