{"id":23449982,"url":"https://github.com/epic-codebase/fh_tailwindcss","last_synced_at":"2026-02-08T10:31:12.294Z","repository":{"id":269086874,"uuid":"906383774","full_name":"Epic-Codebase/fh_tailwindcss","owner":"Epic-Codebase","description":"Tailwind CSS component for FastHTML","archived":false,"fork":false,"pushed_at":"2024-12-27T14:36:06.000Z","size":119,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-24T17:42:51.677Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Epic-Codebase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-20T19:27:39.000Z","updated_at":"2025-06-04T22:16:10.000Z","dependencies_parsed_at":"2025-04-10T05:55:14.957Z","dependency_job_id":"a0074274-3358-4bd5-a8dc-ac7e1528a7cd","html_url":"https://github.com/Epic-Codebase/fh_tailwindcss","commit_stats":null,"previous_names":["epic-codebase/ht_tailwind"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Epic-Codebase/fh_tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Epic-Codebase%2Ffh_tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Epic-Codebase%2Ffh_tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Epic-Codebase%2Ffh_tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Epic-Codebase%2Ffh_tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Epic-Codebase","download_url":"https://codeload.github.com/Epic-Codebase/fh_tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Epic-Codebase%2Ffh_tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29227727,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T09:43:19.170Z","status":"ssl_error","status_checked_at":"2026-02-08T09:42:55.556Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-23T23:31:54.188Z","updated_at":"2026-02-08T10:31:12.280Z","avatar_url":"https://github.com/Epic-Codebase.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FastHTML Tailwind CSS Integration\n\nWelcome to the **FastHTML Tailwind CSS** integration project! This repository offers components and templates to seamlessly integrate **Tailwind CSS** into your FastHTML projects. Tailwind CSS is a utility-first CSS framework designed to provide unparalleled flexibility and speed in styling your applications.\n\n---\n\n## 📦 Installation\n\n### Step 1: Install Tailwind CSS\nTailwind CSS requires **Node.js** as a dependency. Follow the steps below to install and configure Tailwind CSS for your project.\n\n#### 1.1 Install Tailwind CSS via npm\nRun the following commands in your terminal:\n```bash\nnpm install -D tailwindcss\nnpx tailwindcss init\n```\n\n#### 1.2 Configure Template Paths\nUpdate your `tailwind.config.js` file with the paths to your template files:\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./src/**/*.{html,js}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n```\n\n#### 1.3 Add Tailwind Directives to Your CSS\nInclude the Tailwind CSS directives in your main CSS file (`src/input.css`):\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n#### 1.4 Start the Tailwind CLI Build Process\nRun the following command to start the Tailwind CSS build process:\n```bash\nnpx tailwindcss -i ./src/input.css -o ./src/output.css --watch\n```\n\n#### 1.5 Use Custom CSS from fh_tailwindcss\n\nTo customize your styles, follow these steps:\n\nCopy the tailwind.css.template file and paste it into your CSS folder.\n\nImport the tailwind.css file into your input.css:\n```css\n@import './src/static/css/tailwind.css';\n```\nIt will look like this:\n```css\n/* Add your Tailwind directives if needed */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* input.css */\n@import './src/static/css/tailwind.css';\n```\n\n### Step 2: Integrate Tailwind CSS into FastHTML\n\n#### 2.1 Link the Compiled CSS File\nInclude the compiled CSS file in the `\u003chead\u003e` of your FastHTML app:\n```python\napp, rt = fast_app(\n    pico=False,  # We're using Tailwind CSS instead of PicoCSS\n    hdrs=(\n        Meta(charset=\"UTF-8\"),\n        Meta(\n            name=\"viewport\",\n            content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\",\n        ),\n        Meta(\n            name=\"description\",\n            content=\"FastHTML template using Tailwind CSS for styling\",\n        ),\n        Link(rel=\"stylesheet\", href=\"/static/css/output.css\", type=\"text/css\"),\n    ),\n    static_path=Path(__file__).parent / \"static\",\n)\n```\n\n#### 2.2 Use Tailwind Utility Classes\nYou can now use Tailwind CSS classes to style your FastHTML templates and components. Here is an example of a styled button:\n```html\n\u003cbutton class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\u003e\n  Click Me\n\u003c/button\u003e\n```\n\n---\n\n## 🌟 Features\n- **Utility-First Approach:** Tailwind CSS provides a rich set of utility classes for rapid UI development.\n- **Customizable Design:** Extend Tailwind's default configuration to match your project's unique needs.\n- **Seamless Integration:** Quickly add Tailwind CSS to your FastHTML templates and components.\n- **Real-Time Updates:** Leverage the Tailwind CLI for real-time CSS updates during development.\n\n---\n\n## ✨ Custom Build Components\nThis repository provides a set of custom-built components to enhance your development experience. For example, the **Modal** component:\n\n```python\nfrom fasthtml.common import *\nfrom fh_tailwindcss import GridContainer, LabeledInput\n\n@rt(\"/\")\ndef get():\n    return Form(\n        GridContainer(2,\n            LabeledInput(\"User Name\", id=\"user-id\", type=\"text\"),\n            LabeledInput(\"Email\", id=\"email\", type=\"email\")),\n        GridContainer(1,\n            LabeledTextarea(\"Description\", id=\"description\", rows=4)))\n```\n\n---\n\n## 🚀 Getting Started\nTo get started, clone this repository and follow the installation steps above. Feel free to explore and contribute by adding new components or optimizing the existing templates.\n\n```bash\ngit clone https://github.com/Epic-Codebase/fh_tailwind.git\n```\n\n---\n\n## 🛠️ Contributing\nContributions are welcome! If you have ideas for new components or improvements, please open an issue or submit a pull request.\n\n---\n\n## 📜 License\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n### 🙌 Acknowledgments\nSpecial thanks to the creators of Tailwind CSS and FastHTML for their amazing tools that make development faster and more enjoyable.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepic-codebase%2Ffh_tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepic-codebase%2Ffh_tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepic-codebase%2Ffh_tailwindcss/lists"}