Tailwind CSS - A new way to > THINK < CSS

Name: Tailwind CSS - A new way to > THINK < CSS
Rating: 4.5 (528 reviews)

Create Web Pages fast with this amazing CSS framework: Configure and implement!

Created byMartin Krebs Eberth

Last updated 5/2021

English

What you'll learn

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

Course content

6 sections • 55 lectures • 7h 30m total length

Your Course Material for the next 3 course sections (PDF)0:01

Visual Studio Code + Extensions2:28
Install Visual Studio Code as your course editor from the link, then install four extensions—Live Server, Tailwind extension from IntelliSense, and Alpine Chase—to enable live previews, Tailwind support, and animations.
Node.js installation2:24
Git Installation (Optional)3:23
Install git by downloading the binary installer from the official page, handle Mac's unverified developer warning, then use Visual Studio Code terminal to run basic git commands.
SourceTree Installation (Optional)3:24

Install Tailwindcss in 5 steps13:42
Install Tailwind CSS in five steps to set up your first mini project: create a development folder, initialize git, install Tailwind, and configure index.html and styles.css in a dist folder.
ATTENTION - UPDATE - IMPORTANT3:23
Get styles and workflow up and running14:20
Background: Use Git with SourceTree3:24
Install SourceTree, a visual interface for git, and set up a Bitbucket account to begin using version control, including email confirmation and the installer download.
Background: Command Line Usage4:53
Background: Emmet4:49
Learn how Emmet speeds html coding by typing abbreviations to create elements, assign classes and ids, nest lists, and enumerate text with a dollar sign and plus operator.
Background: VSC Shortcuts5:07
Background: The 3 main parts of Tailwindcss8:33

Container + breakpoints + Debug Screen Plugin9:30
Planning the mini website5:04
Roughly arrange the page content12:36
Format and preset headings7:27
Text formatting in Tailwindcss10:07
Define your own heading font8:39
Add your own color5:30
Format the lists6:44
Format lists with Tailwind CSS using list-disc, list-inside, or list-outside, adjust margins with ml-8 and mb-4, increase text size from text-base to text-xl, and tune grid gap.
Format the rest for the lg-resolution2:46
Design a button with icon11:26
Background Info: Free Icons4:26
Explore free icon resources, including material design and feather icons, and learn to preview, adjust stroke and size, and apply filled, outline, and rounded styles for two sizes on pages.
Introduction to responsive design with Tailwindcss4:39
Optimization for medium and small screens (md + sm)15:24
Use Flexbox for Layout as well + 2 small improvements9:29
Learn two small layout improvements using flex box, including stretching a section to full width on medium screens and applying flex and justify around for balanced spacing.
Optimize for very small screens5:18
Optimize for very large screens (xl + 2xl)17:04
Learn how to optimize for very large screens (xl and 2xl) in Tailwind CSS by resizing headlines, adjusting typography, and using fractional widths and flexbox alignment for responsive layouts.
Background patterns9:11
Apply hero patterns like jigsaw and topography in a Tailwind CSS project, adjusting background and foreground colors. Generate rules and consider caching when compiling styles.
Correction for Chrome very small screens9:11
Quote above with quotation marks and a different color4:05
Introduction to dynamic features in Tailwind CSS4:27
Create "Dark Mode"12:55
Brief introduction to Alpinejs + Darkmode button15:54
Dynamic display of the dark mode button13:48
Explore dynamic display of the dark mode button using alpine patterns, including switching text between 'switch to dark mode' and 'switch to normal mode' and showing sun and moon icons.
Outsource button styles15:01
Shrink CSS with Purgecss12:53
Learn to shrink Tailwind CSS by using purgecss, configure content paths, and toggle purge mode to reduce unused styles from megabytes to kilobytes.
Project summary6:10
Install and configure tailwind css with autoprefixer, postcss, and purge for production-ready styles. Master responsive design with screen modifiers, alpine.js for dynamics, and the apply directive for reusable classes.

Course Script (PDF) for Advanced Configuration of Tailwind CSS0:08
New project and copy Tailwind CSS installation11:25
Further configuration options14:53
Learn how to configure Tailwind via the default config, extend spacing with custom values like 13 (3.25 rem), and override outside extend while avoiding node_modules edits.
Background: Advanced colors6:25
Example: Implement your own color palette12:39
Implement a custom Tailwind color palette for a luxury real estate platform, using blue as the main color, gold-yellow accents, neutral gray, blue-green tones, lime highlights, and rose accents.
Background: color gradients11:27
Explore building a gradient background with Tailwind CSS, choosing direction, start, via, and end colors, and ensure full height with h-screen and no-repeat settings.
Outsourcing your own theme (presets)11:12
Presets for the container5:07
Deactivate individual features5:04
Extend / disable variants10:34
Conclusion + Cheat Sheet1:43
Utilize the Tailwind CSS cheat sheet with default config links and copy-paste snippets from resources to your editor, while previewing upcoming layouts and navigations.

Requirements

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

Description

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!

Who this course is for:

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

Tailwind CSS - A new way to > THINK < CSS

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Software Setup4 lectures • 12min

Installation & Basic Skills8 lectures • 58min

Complete mini project26 lectures • 4hr

Advanced configuration of Tailwind CSS11 lectures • 1hr 31min

Digging Deeper. into Tailwind CSS5 lectures • 50min

Requirements

Description

Who this course is for: