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.