# ReactFlow CSS
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.
## Installation
Install ReactFlow CSS using pip:
```bash
pip install ReactFlow-CSS
```
## Quick Start
### Basic Configuration
First, create a configuration for your preferred CSS framework:
```python
# For Tailwind CSS
from reactflow_css.tailwindcss import configure_tailwind
config_tailwind = configure_tailwind(__file__)
# For Bootstrap
from reactflow_css.bootstrap import configure_boots
config_boots = configure_boots(__file__)
```
### Getting Default Templates
Generate default CSS templates quickly:
```python
# Get default Tailwind CSS template
from reactflow_css.tailwindcss import default_tailwind
tailwind_css = default_tailwind(path_output="./styles/tailwind.css")
# Get default Bootstrap template
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:
```python
from reactflow_css.tailwindcss import configure_tailwind
config_tailwind = configure_tailwind(__file__)
# Define Tailwind configuration
tailwind_config = {
"content": ["./src/**/*.{js,ts,jsx,tsx,py}", "./templates/**/*.html"],
"theme": {
"extend": {
"colors": {
"primary": "#3b82f6",
"secondary": "#64748b"
}
}
},
"plugins": []
}
# Apply configuration
config_tailwind.config(tailwind_config)
```
### Step 2: Set Up Templates
Generate the necessary Tailwind files:
```python
# Create tailwind.config.js and input.css files
config_tailwind.render_templates(
path_config="./tailwind.config.js",
path_index="./input.css"
)
# Or use default templates
config_tailwind.default_templates(path_output="./styles/")
```
### Step 3: Compile CSS
Compile your Tailwind CSS:
```python
# Compile with file paths
compiled_css = config_tailwind.compile(
path_config="./tailwind.config.js",
path_index="./input.css",
path_output="./dist/styles.css"
)
# Or compile with inline styles
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:
```python
from reactflow_css.bootstrap import configure_boots
config_boots = configure_boots(__file__)
# Render template from existing file
template_content = config_boots.render_templates(path_index="./styles/custom.css")
```
### Step 2: Configure Styles
Add custom styles and imports:
```python
# Configure with 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:
```python
from reactflow_css.icons import generate_icons
# Generate single icon
icon_svg = generate_icons("home")
print(icon_svg)
# Generate multiple icons
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](https://github.com/Elang-elang/ReactFlow-CSS?tab=License-1-ov-file) file for details. The included Google icons are licensed under the Apache 2.0 License.
Raw data
{
"_id": null,
"home_page": "https://github.com/Elang-elang/tailwind-py",
"name": "ReactFlow-CSS",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "tailwind, tailwindcss, css, styling, reactpy, bootstrap, web-development, frontend, ui, css-framework, python-css, reactflow, material-icons, google-icons, css-compiler, web-components, responsive-design",
"author": "Elang Muhammad",
"author_email": "elangmuhammad888@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/ae/f7/c953a70fad33bddba426d8f9982f9a909880d2e094a4e4adff5fe7547bcf/reactflow_css-1.9.0.tar.gz",
"platform": null,
"description": "# ReactFlow CSS\n\nReactFlow 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.\n\n## Features\n\n- **Tailwind CSS Integration**: Configure and compile Tailwind CSS seamlessly within your Python projects.\n- **Bootstrap Integration**: Include Bootstrap CSS and JavaScript with minimal setup.\n- **Google SVG Icons**: Access and generate SVG icons from Google Material Icons directly in your projects.\n- **ReactPy Compatibility**: Specifically designed for ReactPy components and workflows.\n- **Unified API**: `Helper` class for managing multiple frameworks through a single interface.\n- **Template Management**: Built-in templates and default styles for rapid development.\n\n## Installation\n\nInstall ReactFlow CSS using pip:\n\n```bash\npip install ReactFlow-CSS\n```\n\n## Quick Start\n\n### Basic Configuration\n\nFirst, create a configuration for your preferred CSS framework:\n\n```python\n# For Tailwind CSS\nfrom reactflow_css.tailwindcss import configure_tailwind\nconfig_tailwind = configure_tailwind(__file__)\n\n# For Bootstrap\nfrom reactflow_css.bootstrap import configure_boots\nconfig_boots = configure_boots(__file__)\n```\n\n### Getting Default Templates\n\nGenerate default CSS templates quickly:\n\n```python\n# Get default Tailwind CSS template\nfrom reactflow_css.tailwindcss import default_tailwind\ntailwind_css = default_tailwind(path_output=\"./styles/tailwind.css\")\n\n# Get default Bootstrap template\nfrom reactflow_css.bootstrap import default_boots\nbootstrap_css = default_boots(path_output=\"./styles/bootstrap.css\")\n```\n\n**Parameters:**\n- `path_output` (str, optional): File path to save the generated CSS content. If `None`, return content as string only.\n\n## Tailwind CSS Integration\n\n### Step 1: Configure Tailwind\n\nSet up your Tailwind configuration:\n\n```python\nfrom reactflow_css.tailwindcss import configure_tailwind\n\nconfig_tailwind = configure_tailwind(__file__)\n\n# Define Tailwind configuration\ntailwind_config = {\n \"content\": [\"./src/**/*.{js,ts,jsx,tsx,py}\", \"./templates/**/*.html\"],\n \"theme\": {\n \"extend\": {\n \"colors\": {\n \"primary\": \"#3b82f6\",\n \"secondary\": \"#64748b\"\n }\n }\n },\n \"plugins\": []\n}\n\n# Apply configuration\nconfig_tailwind.config(tailwind_config)\n```\n\n### Step 2: Set Up Templates\n\nGenerate the necessary Tailwind files:\n\n```python\n# Create tailwind.config.js and input.css files\nconfig_tailwind.render_templates(\n path_config=\"./tailwind.config.js\",\n path_index=\"./input.css\"\n)\n\n# Or use default templates\nconfig_tailwind.default_templates(path_output=\"./styles/\")\n```\n\n### Step 3: Compile CSS\n\nCompile your Tailwind CSS:\n\n```python\n# Compile with file paths\ncompiled_css = config_tailwind.compile(\n path_config=\"./tailwind.config.js\",\n path_index=\"./input.css\",\n path_output=\"./dist/styles.css\"\n)\n\n# Or compile with inline styles\ncompiled_css = config_tailwind.compile(\n index=\"@tailwind base; @tailwind components; @tailwind utilities;\",\n path_output=\"./dist/styles.css\"\n)\n```\n\n## Bootstrap Integration\n\n### Step 1: Set Up Templates\n\nInitialize Bootstrap templates:\n\n```python\nfrom reactflow_css.bootstrap import configure_boots\n\nconfig_boots = configure_boots(__file__)\n\n# Render template from existing file\ntemplate_content = config_boots.render_templates(path_index=\"./styles/custom.css\")\n```\n\n### Step 2: Configure Styles\n\nAdd custom styles and imports:\n\n```python\n# Configure with custom styles and imports\ncustom_css = \"\"\"\n.custom-button {\n background-color: #007bff;\n border: none;\n padding: 12px 24px;\n border-radius: 4px;\n}\n\"\"\"\n\nbootstrap_css = config_boots.config(\n style=custom_css,\n path_output=\"./dist/bootstrap-custom.css\",\n '@import \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css\";',\n '@import \"./additional-styles.css\";',\n '@import \"--/css/bootstrap.min.css\";'\n)\n```\nIf you use this format `@import '--/...'` then it will import the css module from the main folder of this package.\n\n## Google Icons Integration\n\nGenerate SVG icons from Google Material Icons:\n\n```python\nfrom reactflow_css.icons import generate_icons\n\n# Generate single icon\nicon_svg = generate_icons(\"home\")\nprint(icon_svg)\n\n# Generate multiple icons\nicons = generate_icons(\"home\", \"settings\", \"account_circle\")\nfor name, svg in icons.items():\n with open(f\"./icons/{name}.svg\", \"w\") as f:\n f.write(svg)\n```\n\n## API Reference\n\nSee the source documentation for complete API reference for each module:\n- `reactflow_css.tailwindcss`\n- `reactflow_css.bootstrap`\n- `reactflow_css.icons`\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/Elang-elang/ReactFlow-CSS?tab=License-1-ov-file) file for details. The included Google icons are licensed under the Apache 2.0 License.\n",
"bugtrack_url": null,
"license": null,
"summary": "A comprehensive Python package for seamless integration of CSS frameworks (Tailwind CSS, Bootstrap) with ReactPy applications and HTML projects",
"version": "1.9.0",
"project_urls": {
"Bug Tracker": "https://github.com/Elang-elang/tailwind-py/issues",
"Documentation": "https://github.com/Elang-elang/tailwind-py#readme",
"Homepage": "https://github.com/Elang-elang/tailwind-py",
"Source Code": "https://github.com/Elang-elang/tailwind-py"
},
"split_keywords": [
"tailwind",
" tailwindcss",
" css",
" styling",
" reactpy",
" bootstrap",
" web-development",
" frontend",
" ui",
" css-framework",
" python-css",
" reactflow",
" material-icons",
" google-icons",
" css-compiler",
" web-components",
" responsive-design"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "483f1121838e0314741aa9981dad712f96710fbf0c30c40685f6d98e75dc9d5a",
"md5": "01dc8bd5e976a87cdb1e29c63bba0f4a",
"sha256": "ce707719a5c720e688cfa6a9547c41280ce91d612dc6c12033fb7cc46263693c"
},
"downloads": -1,
"filename": "reactflow_css-1.9.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "01dc8bd5e976a87cdb1e29c63bba0f4a",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 6443350,
"upload_time": "2025-07-17T02:18:29",
"upload_time_iso_8601": "2025-07-17T02:18:29.670255Z",
"url": "https://files.pythonhosted.org/packages/48/3f/1121838e0314741aa9981dad712f96710fbf0c30c40685f6d98e75dc9d5a/reactflow_css-1.9.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "aef7c953a70fad33bddba426d8f9982f9a909880d2e094a4e4adff5fe7547bcf",
"md5": "39140457181335484a9dfdd8abab9f9d",
"sha256": "f1f0efcc0a21f6d5186ec20dad3e1f7464306696f8c8ef8a884c1cff1d243dc0"
},
"downloads": -1,
"filename": "reactflow_css-1.9.0.tar.gz",
"has_sig": false,
"md5_digest": "39140457181335484a9dfdd8abab9f9d",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 3183609,
"upload_time": "2025-07-17T02:18:33",
"upload_time_iso_8601": "2025-07-17T02:18:33.834471Z",
"url": "https://files.pythonhosted.org/packages/ae/f7/c953a70fad33bddba426d8f9982f9a909880d2e094a4e4adff5fe7547bcf/reactflow_css-1.9.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-17 02:18:33",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Elang-elang",
"github_project": "tailwind-py",
"github_not_found": true,
"lcname": "reactflow-css"
}
JSON
