Pro Tailwind

Advanced Tailwind CSS concepts & patterns, taught by @simonswiss. Level up your Tailwind with multi-theme, multi-style & multi-project UI components.

[Pro Tailwind @ProTailwind]

It's a vibe over here 🤗

[Pro Tailwind @ProTailwind]

oooOO I'm definitely *fetching* this one!

[Simon Vrachliotis @simonswiss]

Officially launching "Tailwind CSS Color Tokens" 🚀

Available for FREE on Epic Web 🤗

Here's the intro video — link to the workshop will be in the reply.

[Pro Tailwind @ProTailwind]

They're so beautiful 😍

[Simon Vrachliotis @simonswiss]

🤌 Blurry blobs with Tailwind CSS

1️⃣ create a few colorful shapes
2️⃣ add some blur and mix-blend-modes
3️⃣ keyframe the position & size of the shapes
4️⃣ stagger the animation-delay for randomness

[Pro Tailwind @ProTailwind]

🤗

[Simon Vrachliotis @simonswiss]

🏎️ Tailwind CSS Speedrun — YouTube thumbnail

[Simon Vrachliotis @simonswiss]

🤌 Glassmorphism with Tailwind CSS

1️⃣ set a semi-transparent background
2️⃣ use `backdrop-filter: blur`
3️⃣ play with the bg opacity, blur level, border and shadow ✨

[Pro Tailwind @ProTailwind]

this guy is almost as orange as me 🤣

[Pro Tailwind @ProTailwind]

Tailwind CSS is a design tool 🤗

[Pro Tailwind @ProTailwind]

This is very exciting news for everybody!

[Adam Wathan @adamwathan]

Should have a new Tailwind CSS v4 alpha ready this week that includes most of the important backwards compatibility stuff needed to play with it in your v3 projects, including JS config file and plugin support 🤞

[Pro Tailwind @ProTailwind]

That's a hoot!

[Simon Vrachliotis @simonswiss]

Tailwind Toot 🍑

Line-up your anchor page jumps perfectly with the scroll-margin-* utilities ✨

[Pro Tailwind @ProTailwind]

paw-some little tut 📣

[Simon Vrachliotis @simonswiss]

Tailwind Toot ✨

The "space-x/y-*" utilities in Tailwind CSS were mostly useful before the "gap" CSS property for Flexbox and Grid was widely supported.

In most cases I prefer to control "in-between" spacing with gap these days!

[Pro Tailwind @ProTailwind]

This guy is pretty cool — just sayin'

[Simon Vrachliotis @simonswiss]

Today’s the day 🚀

After two sold-out live workshops — “Pixel Perfect Figma to Tailwind” is launching as a video course 🎬

Covers both Tailwind CSS v3 and v4 ✨

Super STOKED about this 🎉

[Simon Vrachliotis @simonswiss]

Pixel Perfect Figma to Tailwind CSS — stay tuned 👀

[Pro Tailwind @ProTailwind]

https://t.co/qWVUjtyg5Y

[Pro Tailwind @ProTailwind]

Learn how to build a corner ribbon banner with this FREE tutorial ✨

[Simon Vrachliotis @simonswiss]

Opacity modifiers in Tailwind CSS v4 also work with arbitrary HEX colors or CSS named colors, thanks to `color-mix()` ✨

[Pro Tailwind @ProTailwind]

Tailwind CSS is a design tool 🤗

[Simon Vrachliotis @simonswiss]

Design exploration, directly in the browser, with @tailwindcss.

Sharing the full video here — but be sure to check other tips on the Epic Web platform!

[Pro Tailwind @ProTailwind]

Woof — Tailwind CSS v4 sure looks cool 😎

[Simon Vrachliotis @simonswiss]

✨ Mini Tailwind CSS v4 demo ✨

Replacing the font size scale with @openprops' one.

This is the entire setup (using Tailwind in @astrodotbuild as a Vite plugin)

[Pro Tailwind @ProTailwind]

@ICT_Consults @tailwindcss @simonswiss It's not currently possible — but you're certainly not the only person who wants this 😅

[Pro Tailwind @ProTailwind]

Adding multi-theme support with CSS variables and the Tailwind Plugin API — A Case Study

https://t.co/6IRpC2QDb7

[Pro Tailwind @ProTailwind]

👀 Simon does good live workshops, just sayin'

[Simon Vrachliotis @simonswiss]

7️⃣ There are only 7 tickets left for the workshop 👀

[Simon Vrachliotis @simonswiss]

One of my peak career moments so far was when I decided to learn motion graphics and make a last-minute hype reel for the @tailwindcss v3.0 launch.

The edit came together in ~2 days, from just an idea to something that feels produced by a professional studio 🔥

Very proud 😎

[Simon Vrachliotis @simonswiss]

An extract of my Multi-Theme Strategy @ProTailwind workshop 🤗