Tailwind css file very big 2.42 mib how can i reduce size this file am using laravel?

Question

enter image description here Tailwind css file very big 2.42 mib how can i reduce size this file am using laravel ?

Raphael Mansuy · Accepted Answer

The best strategy is to use generate a specific CSS specific to your need and deploy it on your own CDN

Below an example that explains how to configure TailwindCSS for a simple Html Project

First Step: create a package.json file

yarn init

Add tailwindcss postcss-cli and autoprefixer

yarn add tailwindcss postcss-cli autoprefixer -D

yarn add tailwindcss postcss-cli autoprefixer -D

Create a default configuration file for TailwindCSS

npx tailwind init tailwind.js -full

Create a postcss.config.js file

touch postcss.config.js

Edit the postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
 purge: [
    './src/**/*.html',
  ],
};

Create a tailwind.css as follow

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Use postcss to generate the stylesheet style.css

npx postcss tailwind.css -o style.css

Use the stylesheet in your project

<html>
 <head>
    <link rel="stylesheet" href="style.css"/>
    </head>
 <body>
     <h1>Hello world</h1>
</body>
</html>

Deploy the style.css on a CDN

(Possible CDN : CloudFront / Netlify)

Alexandro Martínez · Answer

Edit your tailwind.config.js and set purge.enabled = true:

const tailwindcss = require('tailwindcss');
module.exports = {
 purge: {
    enabled: true,
    content: ['./src/**/*.{vue,js,ts,jsx,tsx}']
  },
 ...
};

Tailwind CSS - Optimizing for Production

Tailwind css file very big 2.42 mib how can i reduce size this file am using laravel?

Tags:

laravel

tailwind-css

Mahmoud Ayad

2 Answers

Raphael Mansuy

Alexandro Martínez

Recent Activity

Donate For Us

Tailwind css file very big 2.42 mib how can i reduce size this file am using laravel?

Tags:

laravel

tailwind-css

Mahmoud Ayad

2 Answers

Raphael Mansuy

Alexandro Martínez

Related questions

Recent Activity

Donate For Us