update

devour_data/docs/tailwind-v3.json

@@ -0,0 +1,17 @@
+{
+  "id": "553ba1befed16c2801302b73",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "tailwind-v3",
+  "content": "---\ntitle: Tailwind CSS v3\norder: 7\nmainNavExclude: true\nuse_cases: \u003e-\n  utility-first css, rapid prototyping, responsive design, consistent styling,\n  atomic css classes\ntags:\n  - styling\n  - tailwind\n  - utility-css\n  - responsive\n  - postcss\n  - atomic-css\nversion: '1.0'\ndescription: \u003e-\n  Set up Tailwind CSS v3 in Solid apps for utility-first styling, rapid\n  development, and consistent responsive design patterns.\n---\n\n[Tailwind CSS v3](https://v3.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@3 postcss autoprefixer\n```\n\n2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`.\n\n```package-exec\ntailwindcss init -p\n```\n\n3. Since Tailwind CSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n\tcontent: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n\ttheme: {\n\t\textend: {},\n\t},\n\tplugins: [],\n};\n```\n\nFor a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration).\n\n## Add Tailwind directives\n\nIn your `src/index.css` file, add the following Tailwind directives:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nThese directives inform PostCSS that you're using Tailwind and establish the order of the directives. You can append custom CSS below these directives.\n\n## Import Tailwind CSS\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-v3.mdx",
+  "metadata": {
+    "path": "src/routes/guides/styling-components/tailwind-v3.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 2631,
+    "source_type": "github"
+  },
+  "hash": "99167d7fee49f74780e0e7a86c0c26760b2eec5e4f29050d2d1f98782a7b73b5",
+  "timestamp": "2026-02-23T11:43:00.188097668+01:00"
+}