JIT mode and on-demand generation in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable JIT mode in Tailwind CSS configuration.

Tailwind

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

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

Adev

Baot

Cjit

Dprod

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aot' instead of 'jit'

Leaving mode undefined

Setting mode to jit enables Just-In-Time compilation in Tailwind CSS.

2fill in blank

medium

Complete the code to specify which files Tailwind should scan for class names.

Tailwind

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

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

A./assets/**/*.{png,jpg}

B./dist/**/*.{css,js}

C./public/**/*.{html,css}

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

Attempts:

3 left

💡 Hint

Common Mistakes

Scanning output folders like dist

Including image files

The content array tells Tailwind where to look for class names to generate CSS. Usually, source files like HTML and JS inside src folder are scanned.

3fill in blank

hard

Fix the error in this Tailwind config to enable JIT mode correctly.

Tailwind

module.exports = { mode: '[1]', purge: ['./src/**/*.{html,js}'], theme: { extend: {} }, plugins: [] }

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

Awatch

Bjit

Cbuild

Dpurge

Attempts:

3 left

💡 Hint

Common Mistakes

Setting mode to 'purge'

Confusing purge and mode

The mode property must be set to jit to enable Just-In-Time mode. The purge key is deprecated in favor of content.

4fill in blank

hard

Fill both blanks to configure Tailwind for JIT mode and specify content files.

Tailwind

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

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

Ajit

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

C./public/**/*.{css,js}

Daot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aot' for mode

Wrong content path

Set mode to jit and content to the source files path to enable on-demand CSS generation.

5fill in blank

hard

Fill all three blanks to create a Tailwind config that enables JIT, scans source files, and extends the theme colors.

Tailwind

module.exports = { mode: '[1]', content: ['[2]'], theme: { extend: { colors: { primary: '[3]' } } }, plugins: [] }

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

Ajit

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

C#1DA1F2

Daot

Attempts:

3 left

💡 Hint

Common Mistakes

Wrong mode value

Incorrect content path

Invalid color format

This config enables JIT mode, scans source files for class names, and adds a custom primary color to the theme.