Full Stack Web Development MASTERY Course - Novice to Expert - @apply Directive in Tailwind CSS

The video tutorial introduces Tailwind CSS, focusing on state changes like hover, focus, and active states. It then delves into the apply directive, explaining how it helps manage utility classes by consolidating them into a custom class, thus preventing HTML bloat. The tutorial provides a practical example of implementing the apply directive, demonstrating its benefits in making code more readable and maintainable. It concludes with best practices for using the apply directive effectively in projects.

What are the states covered in the Tailwind CSS section?

• Focus, Click, Disabled

• Hover, Click, Disabled

• Active, Click, Hover

• Hover, Focus, Active

What is the main benefit of using the apply directive in Tailwind CSS?

• It helps in reducing HTML code clutter.

• It increases the number of utility classes.

• It makes CSS files larger.

• It removes the need for CSS files.

How does the apply directive affect the HTML code?

• It duplicates the utility classes.

• It adds more classes to the HTML.

• It replaces multiple utility classes with a single custom class.

• It removes all classes from the HTML.

What is the purpose of creating a custom class using the apply directive?

• To make the HTML code more complex.

• To apply the same styles to multiple elements easily.

• To remove the need for CSS files.

• To increase the number of utility classes.

What happens if the custom class is placed before the utility classes in the CSS file?

• The custom class will not be applied.

• The custom class will override the utility classes.

• Both classes will be ignored.

• The utility classes will override the custom class.

Why is the order of directives important in a global CSS file?

• It affects the overriding of utility classes.

• It changes the color of the elements.

• It has no effect on the CSS.

• It determines which classes are ignored.

What should you do if you want your custom class to override Tailwind utility properties?

• Place it in a separate CSS file.

• Place it after the Tailwind utilities.

• Place it at the top of the CSS file.

• Place it before the base components.