Unit05 Tailwind Theme

Overview

In this module, you will use the @apply directive to build your own theme classes.

Objectives

At the end of this module, you should be able to...

• Use tailwind @apply to create your own classes based on tailwind
• Remove the @apply error warning
• Use tailwind translate on hover
• Direct Tailwind to also look in the css files for tailwind classes module.exports = {
   content: ["./**/*.{html,js,css}"],
};

Tasks

• Reference for translate

Watch

• Building the Assignment
• Watch 2620_01a Video
• Watch 2620_01b Video
• Watch 2620_01c Video

Assignment Example

• View the small screen version
• View the medium screen version

Assignment Checklist

Unit05 Tailwind Theme (10 pts)

html head tag

The head tag should contain the following

• A viewport meta tag
• A page title
• A link to the CSS file

Header

The header tag should contain the following

• An h1 tag styled using @apply

Main

The main tag should contain the following

• Four buttons mostly styled using @apply then modified a bit using inline tailwind classes
• implement tailwind movement using translate

Design Principle Requirements

Your page needs to meet these requirements

• Passes the HTML W3C HTML validator
• Passes the WAVE Accessibility test with no contrast errors
• Does not contain any Visual Tangent errors (items touching the screen edge)
• Page is responsive from 320px to 1600px
• Page does not have horizontal scrolling at any page width

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail