Tailwind Labs
Tailwind Labs
  • 77
  • 4 440 400
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
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
Rebuilding iOS 15 with Tailwind CSS
zhlédnutí 77KPřed 3 lety
Rebuilding iOS 15 with Tailwind CSS
Floating Labels with Tailwind CSS
zhlédnutí 101KPřed 3 lety
Floating Labels with Tailwind CSS
How to Use Custom Fonts with Tailwind CSS
zhlédnutí 74KPřed 3 lety
How to Use Custom Fonts with Tailwind CSS
What's New in Tailwind CSS v2.2
zhlédnutí 51KPřed 3 lety
What's New in Tailwind CSS v2.2
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
Sneaking a Peek at Tailwind CSS v2.2
zhlédnutí 18KPřed 3 lety
Sneaking a Peek at Tailwind CSS v2.2
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
Theming Tailwind with CSS Variables
zhlédnutí 124KPřed 3 lety
Theming Tailwind with CSS Variables

Komentáře

  • @CodeFusionDev
    @CodeFusionDev Před 3 dny

    Kindly use latest tailwind css v3.4.* in adding opacity to color

  • @tonyemmanuel8045
    @tonyemmanuel8045 Před 4 dny

    How about adding spacing like padding to the skin? Is there any specif group name required for that skin ?

  • @simonswiss
    @simonswiss Před 4 dny

    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!

  • @MightyMoud
    @MightyMoud Před 9 dny

    Thanks that was useful! :D

  • @mrunknown_811
    @mrunknown_811 Před 12 dny

    thank you

  • @JackHales-s1m
    @JackHales-s1m Před 15 dny

    Really cool!

  • @abdullahsiddiqui1681
    @abdullahsiddiqui1681 Před 20 dny

    Can we not use the graphql api url ?

  • @TOONSSTATION
    @TOONSSTATION Před 25 dny

    Awesome work man.

  • @federicodinuzzo6154
    @federicodinuzzo6154 Před 27 dny

    Just in time is now active by default?

  • @jasperwei5661
    @jasperwei5661 Před 28 dny

    How do I make this mobile responsive?

  • @kshitijkhot1401
    @kshitijkhot1401 Před 29 dny

    btw which font you are using in your editor?

  • @kshitijkhot1401
    @kshitijkhot1401 Před 29 dny

    nice videos.

  • @davejones4740
    @davejones4740 Před měsícem

    The worst piece of crap i've used. Problematic installations and following the video does nothing to upgrade this. Not user-friendly at all

  • @arunbm123
    @arunbm123 Před měsícem

    nice and easy ! Understood

  • @mileslegend
    @mileslegend Před měsícem

    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

  • @dukkcc2
    @dukkcc2 Před měsícem

    bro even tailwind has their own keynote event 😭

  • @praneethBillana
    @praneethBillana Před měsícem

    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?

  • @adrian1358
    @adrian1358 Před měsícem

    Great stuff, a lot of useful info, thank you 😊

  • @ifindev
    @ifindev Před měsícem

    Really awesome!!

  • @sarbajitacharjee1195
    @sarbajitacharjee1195 Před měsícem

    When Your Cat step on your keyboard .. The easiest solution is Delete miss typed and see what was written 😎😎

  • @davejones4740
    @davejones4740 Před 2 měsíci

    Nightmare trying to install this. Tried all day.

  • @hmsmurtaza
    @hmsmurtaza Před 2 měsíci

    Which extension are you using in vs code for tailwindcss code completion??

    • @hmsmurtaza
      @hmsmurtaza Před 2 měsíci

      i found this one during search: Tailwind CSS IntelliSense

  • @perfect.stealth
    @perfect.stealth Před 2 měsíci

    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.

  • @perfect.stealth
    @perfect.stealth Před 2 měsíci

    I can fall asleep to this

  • @lounes03b99
    @lounes03b99 Před 2 měsíci

    i realy enjoy in this video thanks❤🔥

  • @nested9301
    @nested9301 Před 2 měsíci

    why people are so hyped about this useless library it's literally trash lol

  • @wicaksonoleksono7327
    @wicaksonoleksono7327 Před 2 měsíci

    didnt work

  • @saribnoor2105
    @saribnoor2105 Před 2 měsíci

    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 .😍😍

  • @user-bu9px8cu4d
    @user-bu9px8cu4d Před 2 měsíci

    does it work in .heex files?

  • @user-cr2ys2fs3k
    @user-cr2ys2fs3k Před 2 měsíci

    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,

  • @lugawplain1117
    @lugawplain1117 Před 2 měsíci

    what did he use at 4:10 to move that </div at the botoom

  • @christophernelson2261
    @christophernelson2261 Před 2 měsíci

    Hello! Is there a way to make my text sizes fluid responsive? Scaling based on viewport size?

  • @yasingunaydiin
    @yasingunaydiin Před 3 měsíci

    How are people saying that this works? Understood nothing from this tutorial starting from where he added 'jit'.

  • @aleksandervitalevich1299
    @aleksandervitalevich1299 Před 3 měsíci

    «Лёгким движением руки брюки превращаются… брюки превращаются… превращаются брюки… в элегантные шорты!» 👍👍👍

  • @simonswiss
    @simonswiss Před 3 měsíci

    Don't mind me re-watching my own videos 2 years later, and being in awe of how cool they are 👁👄👁

  • @saklinemostaq7718
    @saklinemostaq7718 Před 3 měsíci

    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?

  • @codingwithrendi
    @codingwithrendi Před 3 měsíci

    super cool sir, this is make development easier

  • @zeke2269
    @zeke2269 Před 3 měsíci

    finally found one with tailwind!

  • @mjchoi6355
    @mjchoi6355 Před 3 měsíci

    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?

  • @io_inc
    @io_inc Před 3 měsíci

    I like this, simple and minimalistic

  • @azazinlove7514
    @azazinlove7514 Před 3 měsíci

    Very sad that there is no more vids from this great man :c

  • @switch3
    @switch3 Před 3 měsíci

    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.

    • @simonswiss
      @simonswiss Před 4 dny

      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.

  • @samueljagestedt6479
    @samueljagestedt6479 Před 3 měsíci

    seems like a ux problem that the user can't click the placeholder to focus the input.

  • @user-kh6rp6yx1j
    @user-kh6rp6yx1j Před 4 měsíci

    Hey

  • @zeeeeeman
    @zeeeeeman Před 4 měsíci

    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.

    • @kieran5746
      @kieran5746 Před 2 měsíci

      Thanks for confirming that. I was just about to test the same.

    • @MD-kb8zt
      @MD-kb8zt Před 2 měsíci

      I tried this and seems to still not be working. Do I need to define something in the globals.css or tailwind config?

    • @kieran5746
      @kieran5746 Před 2 měsíci

      @@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?

    • @MD-kb8zt
      @MD-kb8zt Před 2 měsíci

      @@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

    • @kieran5746
      @kieran5746 Před 2 měsíci

      @@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!

  • @whyyshivam
    @whyyshivam Před 4 měsíci

    Hey! What 's your vscode font name?

  • @pyari.shayri_
    @pyari.shayri_ Před 4 měsíci

    It was easy and 👍🏻

  • @davi48596
    @davi48596 Před 4 měsíci

    You rock this one out

  • @UncannyPotato69
    @UncannyPotato69 Před 4 měsíci

    My prettier doesn't work? Please someone help me

  • @zebcode
    @zebcode Před 4 měsíci

    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.