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.
Tailwind CSS requires Node.js as a dependency. Follow the steps below to install and configure Tailwind CSS for your project.
Run the following commands in your terminal:
npm install -D tailwindcss
npx tailwindcss initUpdate 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: [],
};Include the Tailwind CSS directives in your main CSS file (src/input.css):
@tailwind base;
@tailwind components;
@tailwind utilities;Run the following command to start the Tailwind CSS build process:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watchTo 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';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",
)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>- 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.
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)))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.gitContributions are welcome! If you have ideas for new components or improvements, please open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
Special thanks to the creators of Tailwind CSS and FastHTML for their amazing tools that make development faster and more enjoyable.