Tailwind CSS A new way to THINK CSS

Create Web Pages fast with this amazing CSS framework: Configure and implement!
Tailwind CSS A new way to THINK CSS
File Size :
8.24 GB
Total length :
7h 30m



Martin Krebs Eberth


Last update




Tailwind CSS A new way to THINK CSS

What you’ll learn

Style Webcontent with TailwindCSS, fast, efficient, unique and practical

Tailwind CSS A new way to THINK CSS


Having some experience with CSS are necessary. Experience with other CSS frameworks like Bootstrap will help but are not mandatory.


Hello and Welcome!I just showed you this sailing boat, because what I will teach you in this course will literally push forward your frontend development.Maybe you heard already that with TailwindCss you can develop beautiful and unique websites and interfaces very rapidly.But the most important advantage for me is, that you do not have to create endless stylesheets for adapting your website for different screen sizes.For example if you want to apply a class only for large screen sizes and above you just add a “lg:” to the class that you are using.My name is Martin and I’ve been using CSS and Frameworks like Bootstrap on a professional level for a very long time.I have to tell you – for me – TailwindCss is indeed a small revolution in web development. In Fact with TailwindCss you are combining the advantages of normal CSS with the advantages of frameworks like Bootstrap.In this course I will show you the Ins and Outs of how to install, configure and in many examples how to apply TailwindCss.We will do responsive Layouts, Animations and much more.Furthermore I will give you a short introduction into alpine.js, which is also revolutionary, when it comes to easily triggering behavior like animations in your web design.I will provide you with the full source code for every step we do in this course, as well as some useful cheat sheets – that will help you remember later what you learned.This course is not very long, I want to really urge you to invest a weekend or several evenings to do this course and to learn something, that is a lot of fun, and something that will definitely play a very important role in web development in the 2020’s.I look very much forward seeing you in this amazing course!


Section 1: Introduction

Lecture 1 Your Course Material for the next 3 course sections (PDF)

Section 2: Software Setup

Lecture 2 Visual Studio Code + Extensions

Lecture 3 Node.js installation

Lecture 4 Git Installation (Optional)

Lecture 5 SourceTree Installation (Optional)

Section 3: Installation & Basic Skills

Lecture 6 Install Tailwindcss in 5 steps


Lecture 8 Get styles and workflow up and running

Lecture 9 Background: Use Git with SourceTree

Lecture 10 Background: Command Line Usage

Lecture 11 Background: Emmet

Lecture 12 Background: VSC Shortcuts

Lecture 13 Background: The 3 main parts of Tailwindcss

Section 4: Complete mini project

Lecture 14 Container + breakpoints + Debug Screen Plugin

Lecture 15 Planning the mini website

Lecture 16 Roughly arrange the page content

Lecture 17 Format and preset headings

Lecture 18 Text formatting in Tailwindcss

Lecture 19 Define your own heading font

Lecture 20 Add your own color

Lecture 21 Format the lists

Lecture 22 Format the rest for the lg-resolution

Lecture 23 Design a button with icon

Lecture 24 Background Info: Free Icons

Lecture 25 Introduction to responsive design with Tailwindcss

Lecture 26 Optimization for medium and small screens (md + sm)

Lecture 27 Use Flexbox for Layout as well + 2 small improvements

Lecture 28 Optimize for very small screens

Lecture 29 Optimize for very large screens (xl + 2xl)

Lecture 30 Background patterns

Lecture 31 Correction for Chrome very small screens

Lecture 32 Quote above with quotation marks and a different color

Lecture 33 Introduction to dynamic features in Tailwind CSS

Lecture 34 Create “Dark Mode”

Lecture 35 Brief introduction to Alpinejs + Darkmode button

Lecture 36 Dynamic display of the dark mode button

Lecture 37 Outsource button styles

Lecture 38 Shrink CSS with Purgecss

Lecture 39 Project summary

Section 5: Advanced configuration of Tailwind CSS

Lecture 40 Course Script (PDF) for Advanced Configuration of Tailwind CSS

Lecture 41 New project and copy Tailwind CSS installation

Lecture 42 Further configuration options

Lecture 43 Background: Advanced colors

Lecture 44 Example: Implement your own color palette

Lecture 45 Background: color gradients

Lecture 46 Outsourcing your own theme (presets)

Lecture 47 Presets for the container

Lecture 48 Deactivate individual features

Lecture 49 Extend / disable variants

Lecture 50 Conclusion + Cheat Sheet

Section 6: Digging Deeper. into Tailwind CSS

Lecture 51 Define own breakpoints and container (important lecture!)

Lecture 52 Typography Plugin for Tailwind CSS

Lecture 53 Configure Typography plugin

Lecture 54 The current PDF for this section

Lecture 55 Grid system options

Anyone who wants to style web content with the most modern tool out there

Course Information:

Udemy | English | 7h 30m | 8.24 GB
Created by: Martin Krebs Eberth

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top