ReactFlow CSS (Py)
Introduction
ReactFlow CSS is a Python package that simplifies the integration of popular CSS frameworks like Tailwind CSS and Bootstrap into your ReactPy applications and other HTML projects. It provides a streamlined API for configuring, compiling, and serving CSS, making it easier to manage your styles directly from Python.
Features
- Tailwind CSS Integration: Configure and compile Tailwind CSS seamlessly within your Python projects.
- Bootstrap Integration: Include Bootstrap CSS and JavaScript with minimal setup.
- Google SVG Icons: Access and generate SVG icons from Google Material Icons directly in your projects.
- ReactPy Compatibility: Specifically designed for ReactPy components and workflows.
- Unified API:
Helper
class for managing multiple frameworks through a single interface.
- Template Management: Built-in templates and default styles for rapid development.
- CLI Comment: For
Setup and Build
your projects
Installation
Install ReactFlow CSS using pip:
pip install ReactFlow-CSS
CLI Usage
Run the following command:
rf-css [command] [flags] [args]
The CLI simplifies the development process.
Usage Examples:
rf-css init -d
Creates default Tailwind CSS styles.
Getting Help
rf-css --help
For more information, run the above command.
Quick Start
Basic Configuration
First, create a configuration for your preferred CSS framework:
from reactflow_css.tailwindcss import configure_tailwind
config_tailwind = configure_tailwind(__file__)
from reactflow_css.bootstrap import configure_boots
config_boots = configure_boots(__file__)
Getting Default Templates
Generate default CSS templates quickly:
from reactflow_css.tailwindcss import default_tailwind
tailwind_css = default_tailwind(path_output="./styles/tailwind.css")
from reactflow_css.bootstrap import default_boots
bootstrap_css = default_boots(path_output="./styles/bootstrap.css")
Parameters:
path_output
(str, optional): File path to save the generated CSS content. If None
, return content as string only.
Tailwind CSS Integration
Step 1: Configure Tailwind
Set up your Tailwind configuration:
from reactflow_css.tailwindcss import configure_tailwind
config_tailwind = configure_tailwind(__file__)
tailwind_config = {
"content": ["./src/**/*.{js,ts,jsx,tsx,py}", "./templates/**/*.html"],
"theme": {
"extend": {
"colors": {
"primary": "#3b82f6",
"secondary": "#64748b"
}
}
},
"plugins": []
}
config_tailwind.config(tailwind_config)
Step 2: Set Up Templates
Generate the necessary Tailwind files:
config_tailwind.render_templates(
path_config="./tailwind.config.js",
path_index="./input.css"
)
config_tailwind.default_templates(path_output="./styles/")
Step 3: Compile CSS
Compile your Tailwind CSS:
compiled_css = config_tailwind.compile(
path_config="./tailwind.config.js",
path_index="./input.css",
path_output="./dist/styles.css"
)
compiled_css = config_tailwind.compile(
index="@tailwind base; @tailwind components; @tailwind utilities;",
path_output="./dist/styles.css"
)
Bootstrap Integration
Step 1: Set Up Templates
Initialize Bootstrap templates:
from reactflow_css.bootstrap import configure_boots
config_boots = configure_boots(__file__)
template_content = config_boots.render_templates(path_index="./styles/custom.css")
Step 2: Configure Styles
Add custom styles and imports:
custom_css = """
.custom-button {
background-color: #007bff;
border: none;
padding: 12px 24px;
border-radius: 4px;
}
"""
bootstrap_css = config_boots.config(
style=custom_css,
path_output="./dist/bootstrap-custom.css",
'@import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css";',
'@import "./additional-styles.css";',
'@import "--/css/bootstrap.min.css";'
)
If you use this format @import '--/...'
then it will import the css module from the main folder of this package.
Google Icons Integration
Generate SVG icons from Google Material Icons:
from reactflow_css.icons import generate_icons
icon_svg = generate_icons("home")
print(icon_svg)
icons = generate_icons("home", "settings", "account_circle")
for name, svg in icons.items():
with open(f"./icons/{name}.svg", "w") as f:
f.write(svg)
API Reference
See the source documentation for complete API reference for each module:
reactflow_css.tailwindcss
reactflow_css.bootstrap
reactflow_css.icons
License
This project is licensed under the MIT License. See the LICENSE file for details. The included Google icons are licensed under the Apache 2.0 License.