Tailwind CSS package for FastHTML.
Project description
FastHTML Tailwind CSS Integration
Welcome 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.
📦 Installation
Step 1: Install Tailwind CSS
Tailwind CSS requires Node.js as a dependency. Follow the steps below to install and configure Tailwind CSS for your project.
1.1 Install Tailwind CSS via npm
Run the following commands in your terminal:
npm install -D tailwindcss
npx tailwindcss init
1.2 Configure Template Paths
Update your tailwind.config.js file with the paths to your template files:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
1.3 Add Tailwind Directives to Your CSS
Include the Tailwind CSS directives in your main CSS file (src/input.css):
@tailwind base;
@tailwind components;
@tailwind utilities;
1.4 Start the Tailwind CLI Build Process
Run the following command to start the Tailwind CSS build process:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
1.5 Use Custom CSS from fh_tailwindcss
To customize your styles, follow these steps:
Copy the tailwind.css.template file and paste it into your CSS folder.
Import the tailwind.css file into your input.css:
@import './src/static/css/tailwind.css';
It will look like this:
/* Add your Tailwind directives if needed */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* input.css */
@import './src/static/css/tailwind.css';
Step 2: Integrate Tailwind CSS into FastHTML
2.1 Link the Compiled CSS File
Include the compiled CSS file in the <head> of your FastHTML app:
app, rt = fast_app(
pico=False, # We're using Tailwind CSS instead of PicoCSS
hdrs=(
Meta(charset="UTF-8"),
Meta(
name="viewport",
content="width=device-width, initial-scale=1.0, maximum-scale=1.0",
),
Meta(
name="description",
content="FastHTML template using Tailwind CSS for styling",
),
Link(rel="stylesheet", href="/static/css/output.css", type="text/css"),
),
static_path=Path(__file__).parent / "static",
)
2.2 Use Tailwind Utility Classes
You can now use Tailwind CSS classes to style your FastHTML templates and components. Here is an example of a styled button:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click Me
</button>
🌟 Features
- Utility-First Approach: Tailwind CSS provides a rich set of utility classes for rapid UI development.
- Customizable Design: Extend Tailwind's default configuration to match your project's unique needs.
- Seamless Integration: Quickly add Tailwind CSS to your FastHTML templates and components.
- Real-Time Updates: Leverage the Tailwind CLI for real-time CSS updates during development.
✨ Custom Build Components
This repository provides a set of custom-built components to enhance your development experience. For example, the Modal component:
from fasthtml.common import *
from fh_tailwindcss import GridContainer, LabeledInput
@rt("/")
def get():
return Form(
GridContainer(2,
LabeledInput("User Name", id="user-id", type="text"),
LabeledInput("Email", id="email", type="email")),
GridContainer(1,
LabeledTextarea("Description", id="description", rows=4)))
🚀 Getting Started
To 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.
git clone https://github.com/Epic-Codebase/fh_tailwind.git
🛠️ Contributing
Contributions are welcome! If you have ideas for new components or improvements, please open an issue or submit a pull request.
📜 License
This project is licensed under the MIT License. See the LICENSE file for details.
🙌 Acknowledgments
Special thanks to the creators of Tailwind CSS and FastHTML for their amazing tools that make development faster and more enjoyable.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file fh_tailwindcss-0.0.3.tar.gz.
File metadata
- Download URL: fh_tailwindcss-0.0.3.tar.gz
- Upload date:
- Size: 15.8 kB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.0.1 CPython/3.12.8
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
75dbe06db599b8e29abffe60c4fee218548f9b8d84efb62630bbd79f553b9ab8
|
|
| MD5 |
db54745494bbc8ea1ed5ef8f119db1af
|
|
| BLAKE2b-256 |
bfa909ff052b218a4d42fd8722c89c683dfd2d3ba2d828465ab01cdf90b5dd99
|
Provenance
The following attestation bundles were made for fh_tailwindcss-0.0.3.tar.gz:
Publisher:
deploy.yml on Epic-Codebase/fh_tailwindcss
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
fh_tailwindcss-0.0.3.tar.gz -
Subject digest:
75dbe06db599b8e29abffe60c4fee218548f9b8d84efb62630bbd79f553b9ab8 - Sigstore transparency entry: 157140521
- Sigstore integration time:
-
Permalink:
Epic-Codebase/fh_tailwindcss@0eb954bbccfd0aa7db75c5b78033d1359c6a522e -
Branch / Tag:
refs/heads/main - Owner: https://github.com/Epic-Codebase
-
Access:
public
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
deploy.yml@0eb954bbccfd0aa7db75c5b78033d1359c6a522e -
Trigger Event:
workflow_dispatch
-
Statement type:
File details
Details for the file fh_tailwindcss-0.0.3-py3-none-any.whl.
File metadata
- Download URL: fh_tailwindcss-0.0.3-py3-none-any.whl
- Upload date:
- Size: 14.0 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.0.1 CPython/3.12.8
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
9bd66c9c620015a2e62e7365f5236e974de0c76c9429e9ef2a514344878743f5
|
|
| MD5 |
0c137cf4b84539b118677f4055f5cdb4
|
|
| BLAKE2b-256 |
ede3172f637caba9f3293a418c2bfa016e34969361a35b69ea15c2fa7b422ee5
|
Provenance
The following attestation bundles were made for fh_tailwindcss-0.0.3-py3-none-any.whl:
Publisher:
deploy.yml on Epic-Codebase/fh_tailwindcss
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
fh_tailwindcss-0.0.3-py3-none-any.whl -
Subject digest:
9bd66c9c620015a2e62e7365f5236e974de0c76c9429e9ef2a514344878743f5 - Sigstore transparency entry: 157140522
- Sigstore integration time:
-
Permalink:
Epic-Codebase/fh_tailwindcss@0eb954bbccfd0aa7db75c5b78033d1359c6a522e -
Branch / Tag:
refs/heads/main - Owner: https://github.com/Epic-Codebase
-
Access:
public
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
deploy.yml@0eb954bbccfd0aa7db75c5b78033d1359c6a522e -
Trigger Event:
workflow_dispatch
-
Statement type:
