CSS file size analysis in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include Tailwind CSS in your HTML file.

Tailwind

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.0/dist/tailwind.min.css" rel="[1]">

Drag options to blanks, or click blank then click option'

Astyle

Bscript

Cstylesheet

Dlink

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'script' instead of 'stylesheet' for the rel attribute.

Omitting the rel attribute entirely.

The rel attribute should be set to stylesheet to properly link the Tailwind CSS file.

2fill in blank

medium

Complete the Tailwind config to enable purging unused CSS from the 'src' folder.

Tailwind

module.exports = {
  content: ["./[1]/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

Asrc

Bpublic

Cdist

Dassets

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong folder name like 'public' or 'dist' which may not contain source files.

Not including the correct file extensions.

The content array tells Tailwind where to look for class names to keep. Usually, source files are in the src folder.

3fill in blank

hard

Complete the Tailwind CLI command to watch for file changes and rebuild CSS automatically.

Tailwind

npx tailwindcss -i ./input.css -o ./output.css --[1]

Drag options to blanks, or click blank then click option'

Abuild

Bpurge

Cminify

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using '--purge' which is deprecated in Tailwind 3.

Using '--minify' which minifies the CSS but does not enable watching.

The --watch flag tells Tailwind to watch files and rebuild CSS automatically, which helps during development.

4fill in blank

hard

Fill both blanks to create a Tailwind CSS class that applies margin and padding.

Tailwind

<div class="m-[1] p-[2] bg-blue-500 text-white">Content</div>

Drag options to blanks, or click blank then click option'

A4

B2

C6

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up margin and padding values.

Using values not defined in Tailwind spacing scale.

The class m-2 applies margin of 0.5rem and p-4 applies padding of 1rem. These are common spacing values in Tailwind.

5fill in blank

hard

Fill all three blanks to create a Tailwind CSS utility that sets font size, font weight, and text color.

Tailwind

<p class="text-[1] font-[2] text-[3]">Hello World</p>

Drag options to blanks, or click blank then click option'

Alg

Bbold

Cgray-700

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid font weight names like 'heavy'.

Using color names without the shade number.

The class text-lg sets a larger font size, font-bold makes text bold, and text-gray-700 applies a medium dark gray color.

Practice

1. Why is it important to check the CSS file size when using Tailwind CSS?

easy

A. To keep the website loading fast and user-friendly

B. To add more colors and fonts automatically

C. To increase the number of CSS classes available

D. To make the website look exactly the same on all browsers

Solution

1. Step 1: Understand the impact of CSS file size

   Larger CSS files take longer to download, slowing website loading times.

2. Step 2: Connect file size to user experience

   Smaller CSS files help websites load faster, improving user friendliness.

3. Final Answer:

   To keep the website loading fast and user-friendly -> Option A

4. Quick Check:

   Small CSS file = faster website [OK]

Hint: Smaller CSS files mean faster loading and better user experience [OK]

Common Mistakes:

• Thinking bigger CSS files improve design automatically
• Confusing file size with number of colors or fonts
• Assuming file size affects browser appearance only

2. Which Tailwind CSS command helps reduce the CSS file size by removing unused styles?

easy

A. tailwind build --minify

B. tailwind generate --colors

C. tailwind start --watch

D. tailwind create --all

Solution

1. Step 1: Identify the command for minifying CSS

   The --minify option reduces file size by compressing CSS.

2. Step 2: Recognize removal of unused styles

   Tailwind's build process with minify removes unused CSS classes automatically.

3. Final Answer:

   tailwind build --minify -> Option A

4. Quick Check:

   Minify command reduces CSS size [OK]

Hint: Use --minify option to shrink CSS file size quickly [OK]

Common Mistakes:

• Choosing commands unrelated to minification
• Confusing watch mode with build mode
• Assuming generate or create commands reduce file size

3. Given this Tailwind CSS config snippet, what will likely happen to the CSS file size?

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
  corePlugins: { preflight: false },
}

medium

A. The CSS file size will be zero because no plugins are used

B. The CSS file size will be larger because preflight is disabled

C. The CSS file size will be unchanged by this config

D. The CSS file size will be smaller because unused styles are removed

Solution

1. Step 1: Understand content paths in Tailwind config

   Specifying content files helps Tailwind remove unused CSS classes.

2. Step 2: Analyze effect of disabling preflight

   Disabling preflight removes base styles but does not increase file size.

3. Final Answer:

   The CSS file size will be smaller because unused styles are removed -> Option D

4. Quick Check:

   Content paths enable CSS purging = smaller file [OK]

Hint: Content paths help remove unused CSS, shrinking file size [OK]

Common Mistakes:

• Thinking disabling preflight increases file size
• Assuming plugins affect file size directly
• Believing file size is zero without plugins

4. You notice your Tailwind CSS file is very large even after building with --minify. What is the most likely cause?

medium

A. You forgot to install Tailwind CSS

B. You used too many colors in your HTML

C. The content paths in the config are missing or incorrect

D. Your browser cache is full

Solution

1. Step 1: Check the role of content paths in Tailwind config

   Content paths tell Tailwind which files to scan to remove unused CSS.

2. Step 2: Understand impact of missing content paths

   If content paths are missing or wrong, Tailwind keeps all CSS, making file large.

3. Final Answer:

   The content paths in the config are missing or incorrect -> Option C

4. Quick Check:

   Missing content paths = no CSS purging = large file [OK]

Hint: Always set correct content paths to remove unused CSS [OK]

Common Mistakes:

• Blaming browser cache for CSS file size
• Thinking too many colors in HTML increase CSS size
• Assuming Tailwind not installed causes large CSS

5. You want to reduce your Tailwind CSS file size for a large project. Which combination of steps is best to achieve this?

hard

A. Add more plugins, disable content paths, and skip minify

B. Set correct content paths, enable --minify, and remove unused plugins

C. Use only default Tailwind colors and ignore content paths

D. Increase font sizes and add custom CSS without purging

Solution

1. Step 1: Use content paths to remove unused CSS

   Correct content paths allow Tailwind to purge unused styles, reducing size.

2. Step 2: Enable minify and remove unused plugins

   Minify compresses CSS; removing unused plugins avoids extra styles.

3. Final Answer:

   Set correct content paths, enable --minify, and remove unused plugins -> Option B

4. Quick Check:

   Content paths + minify + clean plugins = smallest CSS [OK]

Hint: Combine purging, minify, and plugin cleanup for smallest CSS [OK]

Common Mistakes:

• Disabling content paths thinking it helps
• Adding plugins without checking usage
• Ignoring minify option