<p align="center">
<img
src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg"
alt="ReactPy Icon"
>
</p>
<h1 align="center">ReactFlow CSS (Py)</h1>
<p align="center">
<a
href="https://pypi.org/project/reactflow-css"
>
<img
src="https://img.shields.io/pypi/v/reactflow-css.svg?label=PyPI"
alt="PyPI Version"
>
</a>
<a
href="https://github.com/Elang-elang/ReactFlow-CSS?tab=License-1-ov-file"
>
<img
src="https://img.shields.io/badge/license-MIT-blue.svg"
alt="LICENSE MIT"
>
</a>
</p>
<hr></hr>
# 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
- **SASS Converter**: Convert `SASS/SCSS` with cli complex
## Installation
Install ReactFlow CSS using pip:
```bash
pip install ReactFlow-CSS
```
## CLI Usage
Run the following command:
```bash
rf-css [command] [flags] [args]
```
The CLI simplifies the development process.
### Usage Examples:
```bash
rf-css tailwindcss init -default ./output.css
```
Creates default Tailwind CSS styles and output drop in output.css.
### Getting Help
```bash
rf-css --help
```
For more information, run the above command.
## 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/ReactFlow-CSS.git",
"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, reactflow-css, reactflow_css, sass, scss, sass-python, sass-py, sass-convert",
"author": "Elang Muhammad",
"author_email": "elangmuhammad888@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/94/fa/1ce2c08b34a94fa02e3e6bb4910487e01725d74ab50e0185f728c0e54bfa/reactflow_css-2.1.0.tar.gz",
"platform": null,
"description": "<p align=\"center\">\n <img\n src=\"https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg\"\n alt=\"ReactPy Icon\"\n >\n</p>\n\n<h1 align=\"center\">ReactFlow CSS (Py)</h1>\n\n<p align=\"center\">\n <a\n href=\"https://pypi.org/project/reactflow-css\"\n >\n <img\n src=\"https://img.shields.io/pypi/v/reactflow-css.svg?label=PyPI\"\n alt=\"PyPI Version\"\n >\n </a>\n <a\n href=\"https://github.com/Elang-elang/ReactFlow-CSS?tab=License-1-ov-file\"\n >\n <img\n src=\"https://img.shields.io/badge/license-MIT-blue.svg\"\n alt=\"LICENSE MIT\"\n >\n </a>\n</p>\n\n<hr></hr>\n\n# Introduction\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- **CLI Comment**: For `Setup and Build` your projects\n- **SASS Converter**: Convert `SASS/SCSS` with cli complex\n## Installation\n\nInstall ReactFlow CSS using pip:\n\n```bash\npip install ReactFlow-CSS\n```\n\n## CLI Usage\n\nRun the following command:\n\n```bash\nrf-css [command] [flags] [args]\n```\nThe CLI simplifies the development process.\n\n### Usage Examples:\n\n```bash\nrf-css tailwindcss init -default ./output.css\n```\nCreates default Tailwind CSS styles and output drop in output.css.\n\n### Getting Help\n\n```bash\nrf-css --help\n```\n\nFor more information, run the above command.\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": "2.1.0",
"project_urls": {
"Bug Tracker": "https://github.com/Elang-elang/ReactFlow-CSS/issues",
"Documentation": "https://github.com/Elang-elang/ReactFlow-CSS#readme",
"Homepage": "https://github.com/Elang-elang/ReactFlow-CSS.git",
"Source Code": "https://github.com/Elang-elang/ReactFlow-CSS.git"
},
"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",
" reactflow-css",
" reactflow_css",
" sass",
" scss",
" sass-python",
" sass-py",
" sass-convert"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "5fbec9c78e2671b34c9dd4a3aeea67a30f651c253ea289e5076eabe617fc66ed",
"md5": "625c9d12aa32d9678e192e5d1573d384",
"sha256": "579179086f495cc5bafa63fe87d3d9d41c4a4952c1219900be6687c3f475b195"
},
"downloads": -1,
"filename": "reactflow_css-2.1.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "625c9d12aa32d9678e192e5d1573d384",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 10453500,
"upload_time": "2025-08-03T05:49:35",
"upload_time_iso_8601": "2025-08-03T05:49:35.627811Z",
"url": "https://files.pythonhosted.org/packages/5f/be/c9c78e2671b34c9dd4a3aeea67a30f651c253ea289e5076eabe617fc66ed/reactflow_css-2.1.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "94fa1ce2c08b34a94fa02e3e6bb4910487e01725d74ab50e0185f728c0e54bfa",
"md5": "a89999beaff5e65a2e6d398b940b6132",
"sha256": "a4c5464d19a9b4e79eecf5446dd9227d543fd13aac7e62c0bd89d84b5fb03636"
},
"downloads": -1,
"filename": "reactflow_css-2.1.0.tar.gz",
"has_sig": false,
"md5_digest": "a89999beaff5e65a2e6d398b940b6132",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 6352476,
"upload_time": "2025-08-03T05:49:42",
"upload_time_iso_8601": "2025-08-03T05:49:42.463717Z",
"url": "https://files.pythonhosted.org/packages/94/fa/1ce2c08b34a94fa02e3e6bb4910487e01725d74ab50e0185f728c0e54bfa/reactflow_css-2.1.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-03 05:49:42",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Elang-elang",
"github_project": "ReactFlow-CSS",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "reactflow-css"
}
JSON
