Unit04 Tailwind CLI Project

Overview

In this module, you will switch from the play CDN to the locally hosted command line interface version of tailwind. You will configure a basic site with all the necessary parts to implement tailwind in a production environment.

Objectives

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

• Download the tailwind CLI from GitHub
• Change permissions using the terminal in VS Code
• Create a project with input.css and output.css
• Overcome the OS refusal to open the downloaded file
• Add base, components and utilities to the input.css file
• Write a watch script for the terminal./tailwindcss -i input.css -o output.css --watch
• Implement a responsive image (use a picture tag) with Art Direction applied to the three different images
• Add a "call to action" button over the responsive image

Tasks

• Download the instructions to complete this assignment

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

Unit04 Tailwind CLI Project (10 pts)

html head tag

The head tag should contain the following

• viewport meta tag
• page title

body tag

The body tag should contain the following

• A heading1 tag styled with tailwind
• A responsive image with three different crops
• A call to action button positioned over the image
• Set a max screen width on the content and once passed, round the image corners

Grade

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

• Pass
• Fail