Add support for TailwindCSS 4 and Flowbite 4

README.md

@@ -1,7 +1,7 @@
 [![Tests](https://img.shields.io/github/actions/workflow/status/tales-from-a-dev/flowbite-bundle/ci.yml?label=tests&style=for-the-badge)](https://github.com/tales-from-a-dev/flowbite-bundle/actions/workflows/ci.yml)
 ![PHP Version](https://img.shields.io/badge/php->=8.1-4f5b93.svg?style=for-the-badge)
 ![Symfony Version](https://img.shields.io/badge/symfony->=6.4-000.svg?style=for-the-badge)
-[![Flowbite Version](https://img.shields.io/badge/flowbite->=1.6-1c64f2.svg?style=for-the-badge)](https://flowbite.com)
+[![Flowbite Version](https://img.shields.io/badge/flowbite->=4.0-1c64f2.svg?style=for-the-badge)](https://flowbite.com)
 [![Packagist Version](https://img.shields.io/packagist/v/tales-from-a-dev/flowbite-bundle?style=for-the-badge)](https://packagist.org/packages/tales-from-a-dev/flowbite-bundle)
 [![License](https://img.shields.io/github/license/talesfromadev/flowbite-bundle?style=for-the-badge)](https://github.com/tales-from-a-dev/flowbite-bundle/blob/main/LICENSE)
 

composer.json

@@ -21,7 +21,7 @@
     "php": ">=8.1",
     "symfony/http-kernel": "^6.4 || ^7.0 || ^8.0",
     "symfony/twig-bridge": "^6.4 || ^7.0 || ^8.0",
-    "tales-from-a-dev/twig-tailwind-extra": "^0.5"
+    "tales-from-a-dev/twig-tailwind-extra": "^1.0"
   },
   "require-dev": {
     "friendsofphp/php-cs-fixer": "^3.15",

docs/custom_form_types.md

@@ -1,6 +1,6 @@
 # Custom Form Types
 
-This bundle provide the following custom form types:
+This bundle provides the following custom form types:
 
 ## SwitchType
 

docs/index.md

@@ -2,7 +2,7 @@
 
 ## Prerequisites
 
-This bundle requires **PHP 8.1+**, **Symfony 6.4+** and **Flowbite 1.6+**.
+This bundle requires **PHP 8.1+**, **Symfony 6.4+** and **Flowbite 4.0+**.
 
 ## Installation
 
@@ -34,16 +34,26 @@ return [
 
 ### Configuring Tailwind CSS
 
-Update your Tailwind configuration file to include the `templates` folder of the bundle:
+Update your Tailwind configuration to include the `templates` folder of the bundle:
+
+```css
+/* assets/styles/app.css */
+
+@source "../../vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig";
+```
+
+#### Legacy Tailwind CSS configuration
+
+If you are using the legacy Tailwind CSS configuration, add the following line to your `tailwind.config.js` file:
 
 ```js
 // tailwind.config.js
 
 module.exports = {
-  content: [
-    //...
-    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
-  ],
+    content: [
+        //...
+        "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
+    ],
 }
 ```
 
@@ -60,9 +70,17 @@ twig:
         - '@TalesFromADevFlowbite/form/default.html.twig'
 ```
 
-## Run the watcher
+### Compiling assets
+
+Finally, run one of the following commands to build your front-end assets:
+
+#### With [Tailwind bundle](https://symfony.com/bundles/TailwindBundle/current/index.html)
+
+```bash
+php bin/console tailwind:build 
+```
 
-Finally, run the following command to compile the front-end assets via Webpack:
+#### With Webpack Encore
 
 ```bash
 # With npm

docs/theme_customization.md

@@ -2,8 +2,8 @@
 
 ## Overriding CSS classes
 
-All used CSS classes are contained in [Twig blocks](https://github.com/talesfromadev/flowbite-bundle/blob/main/templates/form/default.twig#L244) 
-which allows to customize the theme very easily.
+All CSS classes are contained in [Twig blocks](https://github.com/talesfromadev/flowbite-bundle/blob/main/templates/form/default.twig#L244) 
+which allows customizing the theme very easily.
 
 Create a new theme in your `templates` directory and make it use the bundle `default` theme: 
 
@@ -13,7 +13,7 @@ Create a new theme in your `templates` directory and make it use the bundle `def
 {% use '@TalesFromADevFlowbite/form/default.html.twig' %}
 ```
 
-Now, just override the desire block with any Tailwind CSS class you want:
+Now, override the desired block with any Tailwind CSS class you want:
 
 ```php
 # templates/form/layout.html.twig
@@ -25,7 +25,7 @@ Now, just override the desire block with any Tailwind CSS class you want:
 {%- endblock class_submit %}
 ```
 
-Finally, don't forget to update your `twig` configuration to use your newly created template:
+Finally, update your `twig` configuration to use your newly created template:
 
 ```yaml
 # config/packages/twig.yaml
@@ -36,9 +36,9 @@ twig:
         - 'form/layout.html.twig'
 ```
 
-## Class block list
+## Class blocks list
 
-Here is a list of all available class block:
+Here is a list of all available class blocks:
 
 * Label
   * class_label
@@ -60,12 +60,13 @@ Here is a list of all available class block:
   * class_button
   * class_submit
 * Various
-  * class_time_separator
+  * class_input_group
   * class_addon
   * class_widget_addon_prepend
   * class_widget_addon_append
   * class_addon_prepend
   * class_addon_append
+  * class_time_separator
   * class_help_text
 * Error
   * class_label_error