- 77
- 4 440 400
Tailwind Labs
Canada
Registrace 22. 09. 2020
We're a small team of developers and designers spread out all across the world, building tools that help other developers build better user interfaces. We created Tailwind CSS, Headless UI, Hero Patterns, Heroicons, and wrote Refactoring UI.
Tailwind Connect 2023 — Keynote
The keynote from Tailwind Connect 2023, our first-ever live event that took place on June 20th, 2023, featuring presentations from Adam Wathan, Sam Selikoff, and Steve Schoger.
Read the recap on our blog: tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap
00:00 Introduction
10:00 Tailwind CSS for the modern web
35:46 Oxide, the next evolution of Tailwind CSS
58:30 Catalyst, a React UI kit for Tailwind CSS
1:10:09 Designing Catalyst
1:28:28 Tricks from Catalyst
Read the recap on our blog: tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap
00:00 Introduction
10:00 Tailwind CSS for the modern web
35:46 Oxide, the next evolution of Tailwind CSS
58:30 Catalyst, a React UI kit for Tailwind CSS
1:10:09 Designing Catalyst
1:28:28 Tricks from Catalyst
zhlédnutí: 336 089
Video
What's new in Tailwind CSS v3.1?
zhlédnutí 120KPřed 2 lety
We just released Tailwind CSS v3.1! Come along for a tour of all the most exciting new stuff we've jammed in for this release. Tailwind CSS v3.1: tailwindcss.com/blog/tailwindcss-v3-1 Release notes: github.com/tailwindlabs/tailwindcss/releases/tag/v3.1.0 Documentation: tailwindcss.com 00:00 Intro 00:23 TypeScript types 02:36 Build-time imports for Tailwind CLI 05:48 Theme function opacity suppo...
Building a command palette with Tailwind CSS, React, and Headless UI
zhlédnutí 68KPřed 2 lety
In this video I'll walk you through the steps to build a fully accessible command palette using Tailwind CSS, React, and the new combobox component in Headless UI. Chapters: 00:00 Intro 00:10 What we're building 00:34 Command palette examples 01:13 Our starting point 03:00 The Dialog component 04:41 Styling the Dialog 08:28 The Combobox component 13:17 Displaying the projects data 17:05 Styling...
Sorting Tailwind CSS Classes Automatically with Prettier
zhlédnutí 88KPřed 2 lety
In this video, I'll show you how to set up Prettier and the new Prettier plugin for Tailwind CSS, which will sort your classes automatically. One thing less to argue about with your team! 00:00 - Introduction 00:32 - Setting up Prettier 02:47 - Formatting on save 03:40 - Installing the Prettier plugin for Tailwind CSS 04:41 - How classes are sorted 05:57 - High impact classes first 06:46 - Modi...
Upgrading to Tailwind CSS v3.0
zhlédnutí 52KPřed 2 lety
In this video, I'll walk you through the most important steps when upgrading an existing project to Tailwind CSS v3.0. We'll update our dependencies, set up the content configuration for the new Just-in-Time engine, migrate to the updated color palette, and more. Chapters: 00:00 Introduction 00:46 Upgrade packages 01:35 Remove dark mode configuration 02:28 Remove variant configuration 03:05 Con...
Effortless typography, even in dark mode - Tailwind CSS Typography v0.5
zhlédnutí 51KPřed 2 lety
In this video, I'll walk you through all of the new features in Tailwind CSS Typography v0.5, including dark mode support, new customization possibilities, and a better way to embed outside markup in your content. Announcement: tailwindcss.com/blog/tailwindcss-typography-v0-5 Documentation: tailwindcss.com/docs/typography-plugin
What's new in Tailwind CSS v3.0?
zhlédnutí 183KPřed 2 lety
In this video, I'll show you some of the exciting new features added in Tailwind CSS v3.0. Release notes: tailwindcss.com/blog/tailwindcss-v3 Upgrade guide: tailwindcss.com/docs/upgrade-guide Chapters: 0:00 Intro 0:10 Just-in-Time, all the time 2:55 Even more colors out of the box 3:28 Colored box shadows, finally 5:16 Print modifier 7:42 Native aspect-ratio 10:28 Comprehensive scroll snap supp...
Introducing Tailwind CSS v3.0
zhlédnutí 175KPřed 2 lety
Tailwind CSS v3.0 is here - bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. tailwindcss.com/blog/tailwindcss-v3
Translating a Custom Design System to Tailwind CSS
zhlédnutí 120KPřed 2 lety
In this video, we'll take a website design and corresponding style guide given to us by a designer, and translate it into a custom Tailwind CSS configuration to create our own utility framework tuned specifically for the project. Tailwind CSS: tailwindcss.com Configuration documentation: tailwindcss.com/docs/configuration
The All-New Just-in-Time CDN - Tailwind CSS v3.0 Preview
zhlédnutí 30KPřed 2 lety
In this video, I'll show you an early preview of the upcoming Just-in-Time CDN, which will ship with Tailwind CSS v3.0. Tailwind CSS v3.0.0-alpha.1 Release Notes: github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1
Adding Tailwind CSS to an Existing Project
zhlédnutí 34KPřed 2 lety
In this video, I'll show you how to add Tailwind CSS to an existing project without running into naming collisions or specificity issues, and while making sure we don't bloat the CSS by adding a whole new framework into the mix.
Building a YouTube Thumbnail with Tailwind CSS
zhlédnutí 28KPřed 2 lety
In this video, we'll build the CZcams thumbnail you just clicked on, from scratch, using Tailwind CSS. Tailwind Play: play.tailwindcss.com/sQlxw7MlB2
Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js
zhlédnutí 129KPřed 2 lety
In this video, we're going to build a simple Ecommerce website with Tailwind UI, Shopify, and Next.js. We'll fetch products from Shopify using the Storefront GraphQL API, and build our front-end by assembling and customizing components from Tailwind UI. Demo site: tailwindui-shopify.vercel.app Tailwind UI: tailwindui.com Storefront API: shopify.dev/api/storefront 0:00 - Intro 0:42 - Starting po...
Glowing Background Gradient Effects with Tailwind CSS
zhlédnutí 90KPřed 3 lety
In this video, I'll show you how to achieve that awesome glow effect popping up everywhere with vanilla Tailwind CSS utilities. Inspiration: linear.app Tailwind Play: play.tailwindcss.com/fNKKyOG2Yv
Building a Fancy Responsive Tile Grid with Tailwind CSS
zhlédnutí 75KPřed 3 lety
In this video, I'll show you the tricks you need to know to build this really cool particular grid design found on the leanspin.pl website. Play: play.tailwindcss.com/9IEjFauwTF
How to Use Custom Fonts with Tailwind CSS
zhlédnutí 74KPřed 3 lety
How to Use Custom Fonts with Tailwind CSS
Building Blurry, Animated Background Shapes with Tailwind CSS
zhlédnutí 112KPřed 3 lety
Building Blurry, Animated Background Shapes with Tailwind CSS
Controlling Stacking Contexts with Isolation Utilities - What's new in Tailwind CSS
zhlédnutí 28KPřed 3 lety
Controlling Stacking Contexts with Isolation Utilities - What's new in Tailwind CSS
Just-in-Time Compiler, Now in Core - What's new in Tailwind CSS
zhlédnutí 21KPřed 3 lety
Just-in-Time Compiler, Now in Core - What's new in Tailwind CSS
Orchestrating Nested Transitions in Vue.js with Headless UI and Tailwind CSS
zhlédnutí 23KPřed 3 lety
Orchestrating Nested Transitions in Vue.js with Headless UI and Tailwind CSS
Box Decoration Break Utilities - What's new in Tailwind CSS
zhlédnutí 19KPřed 3 lety
Box Decoration Break Utilities - What's new in Tailwind CSS
Mix & Background Blending Utilities - What's new in Tailwind CSS
zhlédnutí 31KPřed 3 lety
Mix & Background Blending Utilities - What's new in Tailwind CSS
Filters & Backdrop Filters - What's new in Tailwind CSS
zhlédnutí 28KPřed 3 lety
Filters & Backdrop Filters - What's new in Tailwind CSS
Building Accessible Switch/Toggle Buttons with Headless UI React and Tailwind CSS
zhlédnutí 23KPřed 3 lety
Building Accessible Switch/Toggle Buttons with Headless UI React and Tailwind CSS
Building a Custom Dropdown Menu with Headless UI React and Tailwind CSS
zhlédnutí 85KPřed 3 lety
Building a Custom Dropdown Menu with Headless UI React and Tailwind CSS
Kindly use latest tailwind css v3.4.* in adding opacity to color
How about adding spacing like padding to the skin? Is there any specif group name required for that skin ?
Heads up, none of the purge thing is relevant in Tailwind CSS v3 and later. The Just-in-Time engine never generates unused Tailwind classes to begin with. You can ignore this step completely - but the "dynamic classes" approach still stands!
Thanks that was useful! :D
thank you
Really cool!
Can we not use the graphql api url ?
Awesome work man.
Just in time is now active by default?
How do I make this mobile responsive?
btw which font you are using in your editor?
nice videos.
The worst piece of crap i've used. Problematic installations and following the video does nothing to upgrade this. Not user-friendly at all
nice and easy ! Understood
your a master...your amazing and because of that i will give you a like and a subscribe so that i dont miss out on any of your content
bro even tailwind has their own keynote event 😭
Hello, We are upgrading the Tailwind Version 1 to Version 3. After upgrade we are facing the below issue. issue is : The `border` class does not exist. If `border` is a custom class, make sure it is defined within a `@layer` directive. .btn-secondary-purple { @apply text-purple-100 border border-purple-100; } can you help me with this problem?
Great stuff, a lot of useful info, thank you 😊
Really awesome!!
When Your Cat step on your keyboard .. The easiest solution is Delete miss typed and see what was written 😎😎
Nightmare trying to install this. Tried all day.
Which extension are you using in vs code for tailwindcss code completion??
i found this one during search: Tailwind CSS IntelliSense
What i think is amazing about this framework is that it has the power of writing inline styles (grain control) while not writinf inline styles.
I can fall asleep to this
i realy enjoy in this video thanks❤🔥
why people are so hyped about this useless library it's literally trash lol
didnt work
u make these animation as simple as it look tough .like when i see it look dificult to other web how people create this but i have learned it from u great .😍😍
does it work in .heex files?
thankyou for this video but i got a problem which is the objects on top dosn't works after i added divs as a background animate,
what did he use at 4:10 to move that </div at the botoom
Hello! Is there a way to make my text sizes fluid responsive? Scaling based on viewport size?
How are people saying that this works? Understood nothing from this tutorial starting from where he added 'jit'.
«Лёгким движением руки брюки превращаются… брюки превращаются… превращаются брюки… в элегантные шорты!» 👍👍👍
Don't mind me re-watching my own videos 2 years later, and being in awe of how cool they are 👁👄👁
Do I need to install it for all my working directory and also create a .prettierrc file? Are there another option to do it once and will apply all my working directory?
super cool sir, this is make development easier
finally found one with tailwind!
I'm trying to implement focus-visible on input fields but it still shows focus when user clicks in. focus-visible:outline-none works for buttons and links but not for input fields. Can anyone help how I can remove the focus from input field please?
I like this, simple and minimalistic
Very sad that there is no more vids from this great man :c
This video is actually more about React than Tailwind. The fact that it helps to reduce the duplication of Tailwind's utilities classes is only incidental to React's component architecture.
Yep, the morale of the story is that making the abstraction at the "component" level (the markup) is a great solution. React, PHP, Astro, Vue, Blazor, Twig, Handlebars... anything will do! The essence of the message here is that doing the abstraction at the CSS level doesn't eliminate all the duplication - you still need to re-create the markup multiple times.
seems like a ux problem that the user can't click the placeholder to focus the input.
Hey
All that function nonsense is no longer needed now. You can just use hex values if you wish. Example: bg-skin-base/10 for 10% opacity on the base background color. Wonderful improvements since 2021.
Thanks for confirming that. I was just about to test the same.
I tried this and seems to still not be working. Do I need to define something in the globals.css or tailwind config?
@@MD-kb8zt I did not get around to trying this out at the time. After reading your comment this morning I went and implemented it and I can confirm that / opacities etc do not work by default with the latest version of Tailwind. @zeeeeeman can you confirm this is actually working for you? If so, would you mind sharing your configurtation?
@@kieran5746 I found a solution. Look for “Customizing Colors” in the tailwind documentation then ctrl f to find “”alpha-value” and it goes over how to define your variables to use the method listed in the original comment
@@MD-kb8zt Thank you so much for updating your comment with a solution. I am not currently at a PC but I will try this ASAP. Thanks again!
Hey! What 's your vscode font name?
It was easy and 👍🏻
You rock this one out
My prettier doesn't work? Please someone help me
I love this tutorial, it would be really useful though if you could also share the design guide so that I can try these things myself against a guide.