Tailwind CSS v1 | Tutorial Series | 04 Typography

by | Jun 13, 2021 | 0 comments

Tailwind CSS v1 | Tutorial Series | 04 Typography

by | Jun 13, 2021 | CSS Tips and Tricks | 0 comments

Taking a looking at the many typography Utility classes that Tailwind Css has to offer. Extending Tailwind Css to use a custom font.

Video Section
00:00 Overview
02:36 Applying Text and Font Utility Classes
10:52 Adding Custom Font to Tailwind Css
13:22 Tailwind Css @apply
17:28 Outro

Tutorial Overview
How to setup and install Tailwind Css using NPM.
Building a Website with Tailwind Css, using css grids, flex box for layout.
Utilizing Tailwind Css mobile first approach to build responsive web design.
Creating subtle animations on our UI components with transition and transform utility classes. Creating components, cards, buttons, navbar with hamburger menu on mobile.

This video tutorial series about TailwindCss by Code with Chu. Video 4 of 14.

Subscribe and Learn to Code w/ Chu

Tutorial Source Files can be found on Github.

Demo Site

TailwindCss – https://tailwindcss.com/
NodeJs – .https://nodejs.org/
VScode – https://code.visualstudio.com/
html – https://www.w3schools.com/html/
css – https://www.w3schools.com/css/
javascript – https://www.w3schools.com/js/

Connect with Code With Chu



<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>