Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
TailwindCSS 2 - Learn TailwindCSS for Beginners
Rating: 4.4 out of 5(283 ratings)
9,094 students

TailwindCSS 2 - Learn TailwindCSS for Beginners

Learn one of the best utility-first frameworks on the web
Created byDary Nazar
Last updated 11/2021
English

What you'll learn

  • What TailwindCSS is and how you can use it
  • How to setup TailwindCSS
  • How to make responsive designs
  • How to add custom fonts to TailwindCSS
  • How to customize TailwindCSS classes
  • How to purge your TailwindCSS file

Course content

1 section • 13 lectures • 1h 56m total length

  • Introduction to TailwindCSS6:14

    This video will briefly explain what TailwindCSS is, and what you can do with it.

  • Setting up TailwindCSS10:14

    This video will show you how you can setup TailwindCSS on your local machine.

  • Fonts, Colors and Alignment13:47

    This video will show you how Fonts, Colors and Alignment work in Tailwind.

  • Background Colors & Gradients11:22

    This video will show you how background colors & gradients work in Tailwind.

  • Background Images7:28

    This video will show you how background images work in Tailwind.

  • Padding & Margin9:35

    This video will show you how padding and margin work in Tailwind.

  • Grid9:56

    This video will show you how grid works in Tailwind.

  • Flexbox7:36

    This video will show you how Flexbox works in Tailwind.

  • Hover, Animations, Transitions & Transformations13:11

    This video will show you how hover, animations, transitions and transformations work in Tailwind.

  • Responsive designs8:04

    Explore responsive designs with TailwindCSS using a mobile-first approach and breakpoints. Apply sm, md, lg, and xl prefixes to adjust grids and visibility.

  • Custom Fonts5:24

    learn to add custom fonts to tailwind by sourcing from google fonts, importing with @import, defining a new font family, and applying it with the font-shadows class.

  • Customize TailwindCSS Classes7:28

    Learn to customize tailwindcss classes by overriding or extending the config, define new colors and shades, and rebuild to apply changes.

  • Purging Your TailwindCSS File6:15

    purge unused tailwind classes for production by configuring postcss and adjusting content targets to generate a lean public style.css.

Requirements

  • Basic HTML5 knowledge
  • Basic CSS3 knowledge

Description

Are you tired of using CSS3 and styling everything yourself? Well, you are at the right place because this course will be a complete Tailwind 2 tutorial.

Tailwind is a utility-first framework that will make your life so much easier because it is packed with classes.

In this video, we’ll be setting up Tailwind, going over fonts, colors, alignment, background colors, gradients, images, padding, margin, grid, flexbox, hover, animations, transitions and transformation.

Next to that, we’re going to dive into responsive designs, and how to customize Tailwind. At the end of the course, you’ll be learning how you can purge your Tailwind CSS file since it’s almost 5MB!

We won’t be creating projects in here, but we will simply cover important topics in that you need to know before starting to use TailwindCSS. This is a video series I have created for my YouTube channel but I thought I’d add it to Udemy.


This course is for:

· Anyone that wants to learn Tailwind

· Students that are tired of using CSS3 and want to use something which is a lot easier

· Web Designers

· Anyone who wants to make beautiful designs


After completing this course, you will know everything you need to design your websites in Tailwind.

Who this course is for:

  • Beginners that want to learn web design

Report abuse