Tailwindmarkup~30 mins

CSS file size analysis in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

CSS File Size Analysis with Tailwind CSS

📖 Scenario: You are working on a website project using Tailwind CSS. You want to understand how much CSS your project is generating and which classes are used to keep your CSS file size small and efficient.

🎯 Goal: Create a simple HTML page using Tailwind CSS classes. Then, add a small script to count and display the number of unique Tailwind CSS classes used in the page. This helps you analyze the CSS file size impact.

📋 What You'll Learn

Create an HTML skeleton with Tailwind CSS linked

Add a few elements with Tailwind CSS utility classes

Create a JavaScript variable to hold all class names used

Write JavaScript code to count unique Tailwind CSS classes and display the count on the page

💡 Why This Matters

🌍 Real World

Web developers often need to keep CSS file sizes small for faster page loads. Counting used CSS classes helps optimize the styles included.

💼 Career

Understanding CSS usage and file size is important for front-end developers to improve website performance and maintainability.

Progress0 / 4 steps

Create the HTML skeleton with Tailwind CSS

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Link the Tailwind CSS CDN stylesheet in the <head>. Inside the <body>, add a <main> element with the class p-6.

Tailwind

Need a hint?

Remember to include the Tailwind CSS CDN link inside the <head> section.

Add elements with Tailwind CSS classes

Inside the <main> element, add a <h1> with the classes text-3xl font-bold mb-4 and the text "Tailwind CSS Usage". Below it, add a <p> with the classes text-gray-700 mb-6 and the text "This page helps analyze CSS file size by counting used classes.".

Tailwind




  
  
  
  CSS File Size Analysis

Need a hint?

Use the exact class names and text content as specified.

Create a JavaScript variable with all class names

Add a <script> tag just before the closing </body> tag. Inside it, create a variable called allClasses and assign it a string containing all the Tailwind CSS classes used in the page: "p-6 text-3xl font-bold mb-4 text-gray-700 mb-6".

Tailwind




  
  
  
  CSS File Size Analysis


  
    Tailwind CSS Usage
    This page helps analyze CSS file size by counting used classes.

Need a hint?

Place the script tag just before the closing </body> tag.

Count unique classes and display the count

Inside the existing <script> tag, add code to split allClasses by spaces into an array called classArray. Then create a Set called uniqueClasses from classArray to get unique class names. Finally, create a new <p> element with the text "Unique Tailwind classes used: " followed by the size of uniqueClasses, and append it to the <main> element.

Tailwind




  
  
  
  CSS File Size Analysis


  
    Tailwind CSS Usage
    This page helps analyze CSS file size by counting used classes.
  
  
    const allClasses = "p-6 text-3xl font-bold mb-4 text-gray-700 mb-6";
    // Add code here to count unique classes and display the count

Need a hint?

Use split(" ") to get an array, then new Set() to get unique values. Create a paragraph and add it inside <main>.