flowbite - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

package.json

 {
   "name": "flowbite",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "The most popular library of interactive components built with Tailwind CSS",
@@ -57,4 +57,4 @@ "keywords": [
     "start:css": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/flowbite.css -o static/flowbite.css --watch",
-    "start:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/docs.css -o static/docs.css --watch",
-    "build": "cross-env NODE_ENV=production && HUGO_ENV=production && run-s build:webpack build:hugo",
+    "start:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/main.css -o static/main.css --watch",
+    "build": "cross-env NODE_ENV=production && HUGO_ENV=production && run-s build:css:docs:min build:webpack build:hugo",
     "build:hugo": "hugo",
@@ -64,4 +64,4 @@ "build:webpack": "webpack --mode=production",
     "build:css": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/flowbite.css -o dist/flowbite.css",
-    "build:css:docs:min": "cross-env NPM_ENV=production npx @tailwindcss/cli -i src/docs.css -o dist/docs.min.css --minify",
-    "build:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/docs.css -o dist/docs.css",
+    "build:css:docs:min": "cross-env NPM_ENV=production npx @tailwindcss/cli -i src/main.css -o static/main.css --minify",
+    "build:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/main.css -o static/main.css",
     "build:js": "run-s build:webpack",
@@ -80,4 +80,4 @@ "copy:js:dist": "copyfiles --flat static/flowbite.js dist && copyfiles --flat static/flowbite.js.map dist && copyfiles --flat static/flowbite.min.js.map dist && copyfiles --flat static/flowbite.min.js dist && copyfiles --flat static/flowbite.turbo.js dist && copyfiles --flat static/flowbite.turbo.min.js dist && copyfiles --flat static/flowbite.turbo.js.map dist && copyfiles --flat static/flowbite.turbo.min.js.map dist && copyfiles --flat static/flowbite.phoenix.js dist && copyfiles --flat static/flowbite.phoenix.min.js dist && copyfiles --flat static/flowbite.phoenix.js.map dist && copyfiles --flat static/flowbite.phoenix.min.js.map dist",
     "@docsearch/js": "^3.0.0-alpha.42",
-    "@tailwindcss/cli": "^4.0.0-beta.10",
-    "@tailwindcss/postcss": "^4.0.0-beta.2",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
@@ -106,3 +106,3 @@ "@typescript-eslint/parser": "^5.46.1",
     "style-loader": "^2.0.0",
-    "tailwindcss": "^4.0.0-beta.10",
+    "tailwindcss": "^4.0.0",
     "terser-webpack-plugin": "^5.3.6",
@@ -120,3 +120,4 @@ "ts-loader": "^9.4.2",
     "flowbite-datepicker": "^1.3.1",
-    "mini-svg-data-uri": "^1.4.3"
+    "mini-svg-data-uri": "^1.4.3",
+    "postcss": "^8.5.1"
   },
@@ -123,0 +124,0 @@ "files": [

README.md

@@ -52,3 +52,3 @@ <p>
 
-Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" >Node.js</a> and <a href="https://tailwindcss.com/" rel="nofollow" >Tailwind CSS</a> installed. 
+Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" target="_blank">Node.js</a> and <a href="https://tailwindcss.com/docs/installation/using-postcss" rel="nofollow" target="_blank">Tailwind CSS</a> installed. This guide works with Tailwind v4.
 
@@ -61,48 +61,42 @@ 1. Install Flowbite as a dependency using NPM by running the following command:
 
-2. Require Flowbite as a plugin inside the `tailwind.config.js` file:
+2. Import Flowbite as a plugin inside your main Tailwind CSS file:
 
 ```javascript
-module.exports = {
-
-    plugins: [
-        require('flowbite/plugin')
-    ]
-
-}
+@plugin "flowbite/plugin";
 ```
 
-3. Make sure that you add the template path to the `tailwind.config.js` file:
+3. Make sure that you add the Flowbite JS source files to your CSS file:
 
-```javascript
-module.exports = {
-
-    content: [
-        "./node_modules/flowbite/**/*.js"
-    ]
-
-}
+```bash
+@source "../node_modules/flowbite";
 ```
 
-4. Include the main JavaScript file to make interactive elements work:
+4. Include the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
 
 ```html
-<script src="../path/to/flowbite/dist/flowbite.js"></script>
+<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
 ```
 
-### Include via CDN
+Learn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/).
 
-The quickest way to get started working with Flowbite is to simply include the CSS and JavaScript into your project via a CDN service such as UNPKG or CDNJS (content delivery networks).
+If you have and old project with Tailwind CSS v3 then [check out this guide](#tailwind-css-v3-to-v4) to learn how to upgrade to v4.
 
+### Include using CDN
+
+The quickest way to get started working with FlowBite is to simply include the CSS and JavaScript into your project via CDN.
+
 Require the following minified stylesheet inside the `head` tag:
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/flowbite@3.0.0/dist/flowbite.min.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.css" rel="stylesheet" />
 ```
 
-And include the following javascript file before the end of the `body` tag:
+And include the following JavaScript file before the end of the `body` element:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/flowbite@3.0.0/dist/flowbite.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.js"></script>
 ```
 
+Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.
+
 ### Bundled JavaScript
@@ -109,0 +103,0 @@

No alert changes

Improved metrics

Total package byte prevSize

5450720

increased by0.55%

Worsened metrics

Dependency count

4

increased by33.33%

Lines of code

48423

decreased by-0.02%

Number of lines in readme file

854

decreased by-0.7%

Dependency changes

• + Addedpostcss@^8.5.1

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.5.3(transitive)

• + Addedsource-map-js@1.2.1(transitive)