I am looking to optimize my custom tailwindcss file by reducing its size

Here is the structure of my package.json file.

 "scripts": {
 "start": "yarn run watch-css && craco start",
 "build": "yarn run build-css && craco build",
 "test": "craco test",
  "eject": "react-scripts eject",
 "build-css": "craco src/index.css -o public/tailwind.css",
 "watch-css": "craco src/index.css -o public/tailwind.css"
 },


 **craco.config.js** content:
    // craco.config.js
   module.exports = {
    style: {
     postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
     },
    },
   }

This is the configuration of my tailwind.config.js file:

  module.exports = {

  purge: ['./src/**/*.{js,jsx,ts,tsx,css}', 
  './public/index.html','./public/tailwind.css'],

  } 

Below is how my style.css file is structured. /* ./your-css-folder/styles.css */

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

I also have an uncompressed file in my public folder named tailwind.css which is 4,188kb in size and contains all the tailwindcss classes. I am looking for ways to purge this file. How can I go about achieving this?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to isolate the words that conclude with a number?

After receiving information from the back-end, I am required to convert it into multiple words and store them in an array. How can I achieve this using regular expressions? Here are the words: Enter Room/Area^_^Area 100#_#Enter Grid^_^Grid2#_#Enter Level ...

Choose an element based on its position in the index (multiple elements with the same class)

Can you use Javascript or jQuery to select an element by its index? For example: <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> If I have 4 elements with ...

Showing information retrieved from a database using PHP in a sequential manner

I'm currently working on developing a webpage that features 6 rows of images, with each row containing 4 images accompanied by captions right below them. The structure I have in mind is as follows: IMAGE IMAGE IMAGE IMAGE TEXT TEXT TEXT TEXT IMAGE ...

Excellent Methods for Implementing a Double Click Functionality in JavaScript for Mouse

Is there a way to make the mouse double click by itself using JavaScript? I need this functionality for a Selenium project that requires testing, but unfortunately Selenium does not provide an option for double clicking. Can anyone suggest how I can achiev ...

Styling with CSS: The Art of Showcasing Initials or Images of Individuals

By following this elegant HTML and CSS example, I am able to showcase my initials over my photo. While this is wonderful, I would like the initials to be displayed only if the image does not exist; if the image is present, the person's initials shoul ...

Display an image in Vue.js

I'm having some trouble displaying images in my laravel/Vue 2.0 project and could use some assistance. Here's how I upload the image using the Laravel controller: //Save image to disk if($request->hasFile('image')) { ...

Tips for organizing and sorting date data in a JSON datatable

I am working with two date input fields: <form id="refresh" method="post" action="income.php"> <input type="text" id="dari" name="dari" /> <input type="text" id="sampai" name="sampai" /> <button type="submit">Refresh</b ...

What is the best way to widen each tab so they fill up the entire width of the content block?

As a newcomer to both programming and this website, I've been exploring various codes for creating vertical and horizontal tabs. I have a specific query about this particular example found at https://jsfiddle.net/eu81273/812ehkyf/: My goal is to adju ...

JavaScript function for converting timestamp to readable date

Can someone help me transform the timestamp 1382086394000 into a readable date format 2013-10-18 08:53:14 by using a JavaScript function? The current function I have is: function cleanDate(d) {return new Date(+d.replace(/\/Date\((\d+)\ ...

Issues with Socket.io functionality on Node server

I have a server set up to connect to a third-party public socket.io stream. While it works fine on my React app, I'm having trouble getting it to work on the server side using Node and Express. The code runs without any errors but the connection is no ...

Improving sharing functionality across multiple VuGen scripts executed through Performance Center

I have multiple VuGen scripts that utilize the Web/HTTP protocol with javascript. Currently, I am using VuGen 12.53 (patch 4) and have a common login.js action in all of my scripts. Whenever I need to make changes to the login action, I have to update ever ...

Tips on programmatically closing the panel once the user password has been successfully updated in a React application

Once the user password has been successfully updated in my React project, I would like the panel to automatically close and redirect to the login page. Can anybody suggest a method to achieve this functionality? Just to clarify, I am currently utilizing R ...

A guide on showcasing NFTs with Next.js and Solidity

Lately, I have delved into the world of web3 dapp development and am currently working on a NFT marketplace project. Following tutorials using Solidity and web3/ethers, I successfully showcased the NFTs belonging to the connected wallet. Now, my goal is t ...

React button click not updating returned element

I have a problem with my React component. It toggles a boolean when a button is clicked and correctly logs the message in the console. However, it does not update the h2 element that is being returned. Can anyone explain why this is happening and suggest ...

Picture spills over onto the following row

Here is the HTML code snippet I have: <div id="thumbs"> ...8 image tags with width and height of images set to 100 x 100px </div> Below is the corresponding CSS: #thumbs { overflow:hidden; float:left; posi ...

React and Redux encounter an issue where selecting a Select option only works on the second attempt, not the first

I am currently working on a React/Redux CRUD form that can be found here. ISSUE RESOLVED: I have encountered an issue where the state should be updated by Redux after making an API call instead of using this.setState. The concept is simple: when a user s ...

Using $state.go within an Ionic application with ion-nav-view may cause unexpected behavior

I recently started working on an Ionic Tabs project. I have a button called "initiateProcess" that triggers some operations when clicked using ng-click. Within the controller, it performs these operations and then navigates to a specific state (tab.target) ...

How can I sum up each array elements using a forEach loop in JavaScript?

Check out my code snippet: var data = [[40, 20, 60], [20, 30, 10], [50, 75, 40]]; var averageData = []; data.forEach(function(entries) { entries.reduce(function(a, b) { return a + b[1]; }, 0); console.log(entries); }); I want to sum ...

Upon initiating a refresh, the current user object from firebase Auth is found to be

Below is the code snippet from my profile page that works perfectly fine when I redirect from the login method of AuthService: const user = firebase.auth().currentUser; if (user != null) { this.name = user.displayName; this.uid = user.uid; } e ...

Creating a menu with items and listeners from a kmllayer - a step-by-step guide

Currently, I am working with a map that includes a kmllayer. This layer has been added using the following code: ctaLayer = new google.maps.KmlLayer('http://www.npd.no/engelsk/cwi/pbl/en/aFactGlobe/disc/ActivityStatus_Producing_labels.kml'); ...