Unit07 Customizing Tailwind

Overview

In this module, you will override the default tailwind fonts, colors, and breakpoints in the tailwind.config.js file.

Objectives

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

• Extend/override the default sans, serif, and mono font families in tailwind.
• Replace the default tailwind colors with colors from your own theme.
• Override the default tailwind breakpoints with your own numbers.
• Know how to use Photoshop HSB to create an even grey spectrum.
• Use HTML tags to mockup a color palette.

Tasks

• Reference tailwind theme configuration settings
• Reference the part about extending the default theme
• Reference for the tailwindcss default Font Family's (sans, serif, mono)
• Watch Designing with Tailwind by Adam Wathan

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
• View the large screen version

Assignment Checklist

Unit07 Customizing Tailwind (10 pts)

html head tag

The head tag should contain the following

• Link to a stylesheet
• Links to Google font families
• Include a viewport meta tag
• Include a page title

Main

The main tag should contain the following

• An h1 tag as the page title styled with tailwind
• Three seperate sections using a styled h2 tag
• Demonstrate the font family overrides you are using
• Display your color overrides using blocks with hex values
• Override the breakpoints between device widths

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