1
Composing CSS Utility Classes with Tailwind Course Introduction
50s
2
Compile Tailwind to CSS with gulp
2m 41s
3
Create Custom Utility Classes in Tailwind
1m 51s
4
Apply mobile-first Responsive Classes in Tailwind
2m 47s
5
Style Elements on hover and focus with Tailwind’s State Variants
34s
6
Change Styles on Multiple Elements with Tailwinds group-hover
40s
7
Control What Variations are Generated for Each Utility Class Module in Tailwind
55s
8
Keep Specificity in Check when Working with Tailwind
1m 32s
9
Extending Tailwind with Responsive Custom Utility Classes
1m 34s
10
Abstract Utility Classes to BEM Components in Tailwind
2m 9s
11
Create a Responsive Card Component by Composing Tailwind's Utility Classes
3m 41s
12
Customize Tailwind’s Naming Convention for Generated Utility Classes
1m 8s
13
Removing Unused CSS in Tailwind with PurgeCSS
1m 20s

Compile Tailwind to CSS with gulp

Tailwind
CSS

Share this video with your friends

In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. We set up a new project from scratch, install tailwind, generate a config file and build a simple gulp task that runs that file through PostCSS to generate the desired CSS output.

file through PostCSS via gulp.

Course

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Jorge Cortes

~ 6 years ago

The package is called tailwindcss not tailwind :)

Massinissa Amalou

~ 6 years ago

You need to add autoprefixer for lastest version of tailwind.

yarn add autoprefixer --dev

Robert

~ 6 years ago

If you're using npm >= 5, you can always run binaries like so:

npx tailwind init