docs(optimization): update optimization file

Author: zoltanszogyenyi

content/customize/optimization.md

@@ -1,7 +1,7 @@
 ---
 layout: home
 title: Tailwind CSS Optimization - Flowbite
-description: Optimize for production by using Purge CSS and remove unused CSS using the Tailwind configuration file
+description: Optimize your project for production use by setting up Flowbite and Tailwind CSS using our guide
 group: customize
 toc: true
 
@@ -11,35 +11,30 @@ next: Accordion
 nextLink: components/accordion/
 ---
 
-The default development build of FlowBite and Tailwind CSS is roughly 3566.2kB uncompressed, 289.2kB when minified and compressed with Gzip, and 71.3kB when compressed with Brotli.
+The default JavaScript development build of Flowbite and Tailwind CSS is roughly 310kB uncompressed, 136kB when minified via CDN.
 
-If you have worked with Tailwind CSS previously, you should already know that you should **use Purge CSS to remove the unused CSS** which was helpful to you when developing.
+Although working with the CDN can be quick and effective, it is not the most efficient way of working with Tailwind CSS and Flowbite. You should definitely check our [quickstart guide](https://flowbite.com/docs/getting-started/quickstart/) and set up Tailwind CSS in your local environment so that the only the CSS being used in your templates will be added to the final CSS file.
 
 ## Remove unused CSS
 
-First of all, you need to set the type of files that you want to be searched for when purging the CSS.
+Since Tailwind v4 you no longer need to set the content paths for your templating files.
 
-```javascript
-// tailwind.config.js
-module.exports = {
-  content: [
-    './src/**/*.html',
-    './src/**/*.vue',
-    './src/**/*.jsx',
-  ],
-  theme: {},
-  plugins: [],
-}
+However, you might want to set custom sources for where the engine should look for utility classes.
+
+```css
+@import "tailwindcss";
+
+@source "../node_modules/flowbite";
 ```
 
-The `purge` object should include **all of the files that have classes**, including JavaScript, Markdown, and HTML files.
+## Build for production
 
-After that, make sure that you set `NODE_ENV` to `production`.
+When building your CSS, make sure that you set `NODE_ENV` to `production`.
 
 The command that you have to run in your terminal for production build would be:
 
 ```javascript
-NODE_ENV=production npx tailwindcss -o flowbite.css
+NODE_ENV=production npx @tailwindcss/cli -i input.css -o output.css
 ```
 
-Learn more about how to optimize your code for production by reading the official <a href="https://tailwindcss.com/docs/optimizing-for-production">Tailwind CSS guide</a>.
+This command will create an `output.css` file that you will include in your templating files.

content/getting-started/introduction.md

@@ -268,7 +268,7 @@ export default {
 5. Compile the source CSS file using NPX:
 
 ```bash
-npx @tailwindcss/cli -i main.css -o styles.css
+npx @tailwindcss/cli -i input.css -o output.css
 ```
 
 Now you should be good to go! Check the <a href="https://tailwindcss.com/docs/upgrade-guide#changes-from-v3" rel="nofollow" target="_blank">deprecated changes from v3</a> to learn more about the new features.

content/getting-started/quickstart.md

@@ -193,7 +193,7 @@ export default {
 5. Compile the source CSS file using NPX:
 
 ```bash
-npx @tailwindcss/cli -i main.css -o styles.css
+npx @tailwindcss/cli -i input.css -o output.css
 ```
 
 Now you should be good to go! Check the <a href="https://tailwindcss.com/docs/upgrade-guide#changes-from-v3" rel="nofollow" target="_blank">deprecated changes from v3</a> to learn more about the new features.