Why production optimization matters in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add Tailwind's base styles to your CSS file.

Tailwind

@tailwind [1];

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

Acomponents

Bplugins

Cutilities

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Using @tailwind components instead of base

Forgetting to include any Tailwind directive

The @tailwind base; directive includes Tailwind's base styles, which are essential for consistent styling.

2fill in blank

medium

Complete the code to enable purging unused CSS in Tailwind's config file.

Tailwind

module.exports = {
  content: [[1]],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

A"./assets/**/*.{js,ts}"

B"./src/**/*.{html,js}"

C"./dist/**/*.{css,js}"

D"./public/**/*.{html,css}"

Attempts:

3 left

💡 Hint

Common Mistakes

Pointing content to CSS files instead of HTML/JS

Using wrong folder paths that don't match your project structure

The content array tells Tailwind where to look for class names to keep in the final CSS. Using "./src/**/*.{html,js}" targets all HTML and JS files in the source folder.

3fill in blank

hard

Fix the error in the Tailwind config to properly enable dark mode.

Tailwind

module.exports = {
  darkMode: [1],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

A"class"

Btrue

C"media"

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean true instead of string values

Setting darkMode to false disables dark mode

Setting darkMode to "class" enables toggling dark mode by adding a dark class to the root element, which is the recommended approach for production.

4fill in blank

hard

Fill both blanks to configure Tailwind to remove unused styles and enable JIT mode.

Tailwind

module.exports = {
  mode: [1],
  purge: [[2]],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

A"jit"

Btrue

Cfalse

D"./src/**/*.{html,js}"

Attempts:

3 left

💡 Hint

Common Mistakes

Setting purge to true or false instead of an array

Not enabling JIT mode when needed

Setting mode to "jit" enables Just-In-Time compilation for faster builds. Setting purge to ["./src/**/*.{html,js}"] configures Tailwind to scan source files for used classes, removing unused styles in production.

5fill in blank

hard

Fill all three blanks to create a responsive container with padding and center alignment using Tailwind classes.

Tailwind

<div class="[1] [2] [3]">
  Content goes here
</div>

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

Acontainer

Bmx-auto

Cpx-4

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center instead of mx-auto for centering the container

Forgetting to add padding for spacing inside the container

The container class sets a max-width and centers content responsively. mx-auto centers the container horizontally by setting automatic margins. px-4 adds horizontal padding for spacing inside the container.