Styling Vue components using TailwindCSS Custom Variants

preview_player
Показать описание
In this video I'll show my new favorite tailwind css feature: TailwindCSS custom variants.

You can use custom variants to define your own custom selector modifiers. Paired with a couple of data attributes, this trick will do wonders when styling your vue components!

  1. cdruc
  2. tailwind css
  3. tailwind css tutorial
  4. tailwindcss variants
  5. Styling Vue components using TailwindCSS custom variants
  6. custom variants
Рекомендации по теме
Styling Vue components 0:10:08

Styling Vue components using TailwindCSS Custom Variants

Headless UI 1.0 0:09:30

Headless UI 1.0 is out! Building React and Vue Components with Tailwind CSS

Create a Custom 0:24:08

Create a Custom Component Library with Vue & Tailwind CSS

Vue & Tailwind 0:00:16

Vue & Tailwind Reusable Modal Component | Code In Description

styling primevue with 0:02:36

styling primevue with tailwind feature preview

Rainbow text Vue 0:09:23

Rainbow text Vue component using TailwindCSS

This Prettier Plugin 0:00:56

This Prettier Plugin Makes Tailwind So Much Better

How to Fix 0:01:56

How to Fix Missing Styles in Your Vue.js Components with PrimeVue and Tailwind CSS

This Vue Tailwind 0:08:07

This Vue Tailwind Component Library Might Be The Best I've Seen...

3 Free Tailwind 0:00:25

3 Free Tailwind CSS Awesome Resources

Building a person 0:19:38

Building a person (profile) component using Vue.js + Tailwind CSS

Build a reusable 0:11:31

Build a reusable avatar component with TailwindCSS, Vue, and CVA

Tailwind CSS is 0:03:55

Tailwind CSS is the worst…

How to Fix 0:01:34

How to Fix Tailwind Not Working Inside style in a Vue Component with Nuxt

Vue 3 & 0:00:58

Vue 3 & Tailwind CSS 4: Easy Installation & Component Creation #vue3 #tailwindcss #vuejs

Building a toggle 0:16:14

Building a toggle component using Vue.js + Tailwind CSS

Vue.js Keyboard UI 0:00:17

Vue.js Keyboard UI using Tailwind CSS 🎹🎨

Vue 3 CDN 0:25:10

Vue 3 CDN Form Input Component with Tailwind CSS | Step-by-Step Tutorial

Tiptap Editor with 0:58:11

Tiptap Editor with Vue.js, Tailwind CSS and Laravel

Beautiful Alert Component 0:17:24

Beautiful Alert Component with TailwindCSS, Vue & CVA

Vue Tooltip component 0:16:41

Vue Tooltip component using Floating UI and TailwindCSS

Integrate Tailwind CSS 0:05:46

Integrate Tailwind CSS with Vue.js 🎨

Build a Modal 0:09:26

Build a Modal using Vue & Tailwind CSS

Vue 3 for 0:01:30

Vue 3 for Beginners #1 — How to Add Tailwind CSS to Your Project

Комментарии
Автор

WOW! Thanks for this. I have always found conditionally styles can get messy with Tailwind. This looks like the perfect solution.

ttncmok
Автор

This is really great. A problem solver.

pradeepspace
Автор

Hello Constantin, this video was a real eye opener! Thanks a lot for this!!
On your website, I notice you replaced the usage of `[data-${variant}=true], &` with, &`.
I've searched for references to that in CSS & tailwind repo for the syntax, but can't find anything related to that, care to explain what it does and how it differs from the previous.

esirei
join shbcf.ru