TailwindCSS - Optimize Websites with Purge

With the rapidly increasing popularity of the tailwind.css library in recent months and its purge tool, it has been observed that when setting up a website, including only the classes used on the page into the CSS file, compressing and optimizing them, significantly improves page performance. Let’s take a look together at how we can include the Tailwind.css library into our projects.

What is Tailwind.CSS?

Tailwind CSS is a CSS framework that web developers can use. A CSS framework includes a set of ready-made CSS classes used to create the look and style of web applications or sites.

Tailwind CSS uses a unique approach. Instead of pre-built style sheets, it provides low-level CSS classes that can be applied directly to an HTML file. These classes represent a set of style properties and allow for faster and more flexible design.

For example, to create a button, you can directly add Tailwind CSS classes to the class attribute in the HTML file. These classes can be used to add different colors, sizes, margins, and other properties to the button. Instead of creating custom CSS styles or relying on files, Tailwind CSS classes let you create fast and reusable components.

Tailwind CSS provides a set of style properties and settings, and it allows you to configure them when needed. It has a customizable structure, so you can adapt it to the needs of your site or application.

In conclusion, Tailwind CSS is a CSS framework that allows you to design websites quickly and effectively.

How to Install Tailwind.CSS? - NPM & CDN Installations

To install and include the Tailwind.CSS library in your project, you can either install it with the help of NPM or Composer, or manually include it from CDN servers. We have shared both methods below. 

Tailwind.CSS NPM Installation

First, navigate to the folder where your project is running. This is usually the root directory of your project. Open the terminal and run the following command:

npm init

This command creates a package.json file and helps you manage your project’s dependencies. Enter the required information according to your needs.

To install Tailwind CSS, run the following command:

npm install tailwindcss 

This command adds the Tailwind CSS dependency to your project.

To create the Tailwind CSS configuration file, run the following command:

npx tailwindcss init

This command creates a file called tailwind.config.js. This file contains the configuration settings for Tailwind CSS and allows you to customize them.

You can configure Tailwind CSS settings by editing the created tailwind.config.js file. In this file, you can customize various settings such as colors, sizes, margins, and other styles.

Include Tailwind CSS in your project’s CSS file. For example, if you have a file named styles.css, add the following @import directive:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities’;

This imports Tailwind CSS’s base styles, components, and utility classes.

Now you can start using Tailwind CSS classes in your HTML file through your CSS file. For example, you can create a button using Tailwind CSS classes:

button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
 Click me
button

In this way, you can use Tailwind CSS in your project. By exploring the other classes and features offered by Tailwind CSS, you can further enhance your design.

Remember, after configuring Tailwind CSS for your project, you may need to compile your CSS files or configure your project. This may vary depending on the tools and setup you are using.

Tailwind.CSS CDN Installation

To add Tailwind CSS to your project using CDN (Content Delivery Network), follow these steps:

Add the following link tag to the head section of your HTML file:

link href="https://cdn.tailwindcss.com/2.2.19/tailwind.min.css" rel="stylesheet”

This tag ensures that Tailwind CSS is downloaded from the CDN and used. In this example, version 2.2.19 of Tailwind CSS is used, but if you want to use the latest version, you can update the URL.

You can start using Tailwind CSS classes in your HTML file. For example, you can create a button using Tailwind CSS classes:

button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
 Click me
button

In this way, you can use Tailwind CSS in your project via CDN. This allows you to design using Tailwind CSS’s style classes.

To use the full features and all classes of Tailwind CSS, making a custom configuration and including your CSS files into the project may be a more flexible approach. However, for quickly prototyping or working on a small project, using a CDN can be practical.

How to Use the Tailwind.CSS Purge System?

The purge feature of Tailwind CSS is an optimization mechanism that ensures only the CSS classes actually needed in your project are included. This feature reduces the size of Tailwind CSS and increases performance.

By default, Tailwind CSS has a wide style library containing many style classes. However, you may only be using a specific subset in your project. In this case, including all other unused classes in the CSS file would be unnecessary and increase the file size.

The purge feature detects only the classes actually used in your project and includes only those in the CSS file. To do this, Tailwind CSS scans your project’s source code and performs static analysis to identify the used classes.

You may need to specify which files to scan by configuring the purge feature in the tailwind.config.js file. For example:

module.exports = {
 purge: ['./index.html'],
 // Other configuration settings...
}

In the above example, the purge feature scans the index.html file to determine the used classes. In this way, only these classes are included in the CSS file.

Using the purge feature allows Tailwind CSS to reduce your project’s size and include only the used classes. This makes web pages load faster and reduces file sizes.

Additionally, npm-watch can be used to monitor pages in real-time and track related classes. To do this, we recommend enabling Tailwind.CSS’s jit mode first. Thanks to this mode, watch operations run faster:

module.exports = {
 mode: 'jit',
 purge: ['./index.html'],
 // Other configuration settings...
}

Then, add the following code to the scripts section of the package.json file on your system:

"scripts": {
 "watch": "npx tailwindcss -i node_modules/tailwindcss/tailwind.css -o public/style.css -w --minify"
},

Finally, just run the npm watch command in your terminal. This way, with every change you make, npm will monitor the relevant files, and thanks to tailwind purge, only the used classes will be included in your CSS file and generate a minified output.