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
https://www.youtube.com/channel/UCSyosm-WcUPT4LnUIIdqSCw

Tutorial Source Files can be found on Github.
https://github.com/codewithchu/tailwindcss-tutorial

Demo Site
https://tailwindcss.arthurchu.ca/

Resources
————————————————————–
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
————————————————————–
https://arthurchu.ca

https://www.instagram.com/codewithchu/
https://www.facebook.com/codewithchu
https://github.com/codewithchu/

source

[newsletter_form]
<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>