Layer organization (base, components, utilities) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a base style for all paragraphs using Tailwind's @layer directive.

Tailwind

@layer [1] {
  p {
    @apply text-base text-gray-700;
  }
}

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

Abase

Bstyles

Cutilities

Dcomponents

Attempts:

3 left

💡 Hint

Common Mistakes

Using @layer components instead of base for default element styles

Using @layer utilities for element styles

The @layer base is used to define base styles like default paragraph text.

2fill in blank

medium

Complete the code to create a custom button component style inside the correct Tailwind layer.

Tailwind

@layer [1] {
  .btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded;
  }
}

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

Acomponents

Bbase

Cutilities

Dthemes

Attempts:

3 left

💡 Hint

Common Mistakes

Putting component styles inside base layer

Using utilities layer for component classes

The @layer components is for custom reusable component styles like buttons.

3fill in blank

hard

Fix the error in this utility class definition by choosing the correct layer.

Tailwind

@layer [1] {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  }
}

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

Acomponents

Bbase

Cstyles

Dutilities

Attempts:

3 left

💡 Hint

Common Mistakes

Placing utility classes inside components or base layers

Using a non-existent layer name

Utility classes like .text-shadow belong in the @layer utilities layer.

4fill in blank

hard

Fill both blanks to define a custom component and a utility class in the correct layers.

Tailwind

@layer [1] {
  .card {
    @apply bg-white shadow-md rounded p-6;
  }
}

@layer [2] {
  .text-glow {
    text-shadow: 0 0 8px rgba(255,255,255,0.8);
  }
}

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

Acomponents

Bbase

Cutilities

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up layers for components and utilities

Using base layer for utility classes

Custom UI parts like .card go in components. Helper classes like .text-glow go in utilities.

5fill in blank

hard

Fill all three blanks to organize base styles, components, and utilities correctly.

Tailwind

@layer [1] {
  h1 {
    @apply text-4xl font-bold;
  }
}

@layer [2] {
  .btn-secondary {
    @apply bg-gray-300 text-gray-800 px-3 py-1 rounded;
  }
}

@layer [3] {
  .border-fancy {
    border-image: linear-gradient(to right, red, orange) 1;
  }
}

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

Abase

Bcomponents

Cutilities

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Putting base element styles in components or utilities

Confusing components and utilities layers

Base styles like h1 go in base. Custom buttons go in components. Helper classes like .border-fancy go in utilities.