simonswiss
simonswiss
  • Видео 99
  • Просмотров 592 462
Marc Lou's Headline Tips — with Tailwind CSS
In this video, I go through Marc Louvion's design tips for headlines - and show you how you can apply these using Tailwind CSS.
Enjoying my teaching style? I'm creating an independent Tailwind CSS course called Pro Tailwind. Check it out at protailwind.com ❤️
# Chapters
0:00 Intro
0:13 Starting point
0:28 Make it BIG
1:00 Make it BOLD
1:35 Make it TIGHT
2:19 Make it BALANCED
4:03 Make it POP
8:21 Make it ADAPT
9:43 Outro
Просмотров: 3 172

Видео

Keystatic Crash Course - Create A GitHub-Powered Blog with Next.js
Просмотров 2,2 тыс.6 месяцев назад
In this crash course on Keystatic, you'll build a simple blog with Next.js. You'll learn about the Keystatic config, schema, collections, singletons, as well as various fields. You'll deploy the project on Vercel, and connect Keystatic to a GitHub account with the Cloud and GitHub modes. Let's dive in! # Chapters 0:00 - Keystatic CLI 1:24 Content path 4:02 New collection 7:49 Image field 11:17 ...
Tailwind CSS: Displaying Table Content At Smaller Screen Sizes
Просмотров 34 тыс.6 месяцев назад
In this video, we'll go through a few iterative steps to improve the way we display table content on smaller devices. We'll first make the table scroll horizontally to avoid breaking the layout. We'll then hide a few table columns based on the available viewport width. Then, we'll collapse the content of multiple columns into one single column. Finally, we'll opt out of using a table for smalle...
01 - Create a New Next.js Project with the Keystatic CLI
Просмотров 1,4 тыс.6 месяцев назад
In this lesson, you'll set up a fresh new Next.js 14 project with the Keystatic CLI. We'll take a quick tour of what's been generated for us, and play around with Keystatic's two-way content editing capabilities! Learn more at keystatic.com
Keystatic Live Previews with Next.js' Draft Mode
Просмотров 1,4 тыс.7 месяцев назад
In this video, I walk through the setup on the Keystatic.com website to power real-time previews, leveraging Next.js' draft mode feature. I wrote a step-by-step guide here: keystatic.com/docs/recipes/real-time-previews
Keystatic in under 5 minutes ⚡️
Просмотров 6 тыс.Год назад
Keystatic in under 5 minutes ⚡️
Laravel Bootcamp - Part 4: Finally trying our app!
Просмотров 1,1 тыс.Год назад
Laravel Bootcamp - Part 4: Finally trying our app!
shadcn/ui - Theming Wrapped in a Tailwind Plugin/Preset
Просмотров 47 тыс.Год назад
shadcn/ui - Theming Wrapped in a Tailwind Plugin/Preset
Laravel Bootcamp - Part 3: New Chirp form, `hasMany` relationship
Просмотров 1,4 тыс.Год назад
Laravel Bootcamp - Part 3: New Chirp form, `hasMany` relationship
Tailwind-Merge Is Incredibly Useful - And Here's Why!
Просмотров 35 тыс.Год назад
Tailwind-Merge Is Incredibly Useful - And Here's Why!
Laravel Bootcamp - Part 2: Models, Migrations & Controllers
Просмотров 2 тыс.Год назад
Laravel Bootcamp - Part 2: Models, Migrations & Controllers
Laravel Bootcamp - Part 1: Installing Laravel and Laravel Breeze
Просмотров 3,7 тыс.Год назад
Laravel Bootcamp - Part 1: Installing Laravel and Laravel Breeze
My Pro Tailwind Workshop Applied in A Real-World SaaS App
Просмотров 7 тыс.Год назад
My Pro Tailwind Workshop Applied in A Real-World SaaS App
Codebase Editing With Minimal Footprint - Keystatic in Production
Просмотров 1,6 тыс.Год назад
Codebase Editing With Minimal Footprint - Keystatic in Production
On brand text selection with Tailwind's `selection` modifier
Просмотров 1,1 тыс.Год назад
On brand text selection with Tailwind's `selection` modifier
Asking ChatGPT to build a multi-style Button components
Просмотров 2,1 тыс.Год назад
Asking ChatGPT to build a multi-style Button components
Live Stream with Kent C. Dodds - Teaser/Highlight
Просмотров 440Год назад
Live Stream with Kent C. Dodds - Teaser/Highlight
Tailwind Labs Highlight Reel
Просмотров 1,5 тыс.Год назад
Tailwind Labs Highlight Reel
Pairing with ChatGPT on a Blog Post 🤜💥🤛
Просмотров 516Год назад
Pairing with ChatGPT on a Blog Post 🤜💥🤛
Keystatic with Astro's Content Collections ⚡️🚀
Просмотров 2,5 тыс.Год назад
Keystatic with Astro's Content Collections ⚡️🚀
A Walkthrough of the Keystatic Early Access Onboarding
Просмотров 1,8 тыс.Год назад
A Walkthrough of the Keystatic Early Access Onboarding
Design, Content, Copy & Code in Parallel: Thinkmill's New Website
Просмотров 2 тыс.Год назад
Design, Content, Copy & Code in Parallel: Thinkmill's New Website
Tailwind CSS has FULL CSS Spec Coverage?!
Просмотров 3,3 тыс.Год назад
Tailwind CSS has FULL CSS Spec Coverage?!
Container Queries in Tailwind CSS
Просмотров 13 тыс.Год назад
Container Queries in Tailwind CSS
Corgi Puppies - The Most Adorable 8 Weeks Ever!
Просмотров 2,3 тыс.Год назад
Corgi Puppies - The Most Adorable 8 Weeks Ever!
Announcing... LIVE Tailwind CSS Workshops
Просмотров 853Год назад
Announcing... LIVE Tailwind CSS Workshops
simonswiss can... RAP?!!
Просмотров 555Год назад
simonswiss can... RAP?!!
Screencast Breakdown - Christoph Rumpel
Просмотров 991Год назад
Screencast Breakdown - Christoph Rumpel
Pro Tailwind Workshops - A Sneak Peek!
Просмотров 4 тыс.Год назад
Pro Tailwind Workshops - A Sneak Peek!
Lumina 4K - The tiny, "AI powered" USB-C webcam
Просмотров 7 тыс.2 года назад
Lumina 4K - The tiny, "AI powered" USB-C webcam

Комментарии

  • @moseskamau4989
    @moseskamau4989 9 дней назад

    Am really enjoing this @simonswiss

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna 14 дней назад

    i made one that merges a daiyui theme into the variables

  • @alkhamistic
    @alkhamistic 15 дней назад

    These are the kind of videos I subscribed to your channel initially. This is you in your element. Great content and presentation. I always learn new ways to style from your videos. Please more like this. I was slowly losing hope with those keystatic videos lol. I couldn't get into them. Hopefully others benefitted at least

  • @rashmi_t
    @rashmi_t 16 дней назад

    Absolutely brilliant video. Your ways of teaching is simple and clear. I subscribe within 5 min watching your video.🎉🎉🎉🎉🎉

  • @edriso
    @edriso 17 дней назад

    Found you on Laracasts, thanks for this great content and vibes man God bless 🙌

  • @alexpanteli3651
    @alexpanteli3651 20 дней назад

    Why not use clamp for fluid font sizing?

    • @simonswiss
      @simonswiss 17 дней назад

      Yep that would defnitely be a great thing to do. I was just going through the blog post with simple interventions - but clamp() would work great for the responsive font size!

    • @alexpanteli3651
      @alexpanteli3651 17 дней назад

      @@simonswiss good stuff :)

  • @nonefvnfvnjnjnjevjenjvonej3384
    @nonefvnfvnjnjnjevjenjvonej3384 21 день назад

    man you are some hot shit simon!

  • @PRonYouTube
    @PRonYouTube 22 дня назад

    fantastic!

  • @lucianooliveira2445
    @lucianooliveira2445 24 дня назад

    I really love the little intervention... Uff Uff.

    • @simonswiss
      @simonswiss 23 дня назад

      Always room for a little corgi intervention!

  • @jamestoone6407
    @jamestoone6407 24 дня назад

    Great video - Can also use box-decoration-break to make text pop

    • @simonswiss
      @simonswiss 23 дня назад

      Yep that's a great one!

  • @madatbay
    @madatbay 24 дня назад

    King is back

    • @simonswiss
      @simonswiss 23 дня назад

      King of inconsistency 😅

  • @mazwrld
    @mazwrld 25 дней назад

    i don't understand the break points in tailwind. like why does small have text-4xl when medium is 5 and lg is 3xl?

    • @simonswiss
      @simonswiss 23 дня назад

      Not sure I understand the question, sorry.

  • @dominikrodler8010
    @dominikrodler8010 26 дней назад

    I learned much more than I expected! Really well done, thanks :-)

    • @simonswiss
      @simonswiss 25 дней назад

      That's amazing to hear! Motivates me to do more of these 🤗

  • @sijmon20031
    @sijmon20031 26 дней назад

    Again, Really good videos! keep them coming 🙌

    • @simonswiss
      @simonswiss 25 дней назад

      Thank you so much - love to hear this!

  • @MrCC-hx8xr
    @MrCC-hx8xr 26 дней назад

    one of my very favourite lecturers is back, but Simon ... damn cut your hair, the previous haircut was 100 times better!

    • @simonswiss
      @simonswiss 25 дней назад

      hahahaha one day! Gotta go through my midlife crisis long hair period first 🤣

    • @MrCC-hx8xr
      @MrCC-hx8xr 25 дней назад

      @@simonswiss you don't need a midlife crisis! And with short hair combed into a bun (like it used to be) you'll look 10 years younger, trust me mate :), it was a top haircut. And thanks for the video, glad you didn't disappear.

    • @simonswiss
      @simonswiss 25 дней назад

      @MrCC-hx8xr definitely going for a fancy fade and top bun before I cut it all short- took way too long to grow it out!

  • @digitalsahara6670
    @digitalsahara6670 26 дней назад

    great video simon, are you working on any more upcoming courses by any chance?

    • @simonswiss
      @simonswiss 23 дня назад

      I just finished recording an EPIC set of 71 videos for my Pixel Perfect Tailwind workshop on Epic Web. It will be available here when it's ready! www.epicweb.dev/workshops

    • @digitalsahara6670
      @digitalsahara6670 23 дня назад

      @@simonswiss thats amazing thank you!

  • @marc-lou
    @marc-lou 26 дней назад

    Haha salut, Simon! I didn't know about isolate, thanks for the lesson.

    • @moneyfr
      @moneyfr 26 дней назад

      moi non plus

    • @simonswiss
      @simonswiss 25 дней назад

      I love than in most my videos, people walk away with a random, unrelated little learning nugget ✨

  • @nikhilpsathyanathan
    @nikhilpsathyanathan 26 дней назад

    Changing line height with text size using backslash was new to me. expecting more short hand like this

    • @simonswiss
      @simonswiss 26 дней назад

      There are quite a few: the opacity modifier is another one for example.

  • @first-impressions-CRO
    @first-impressions-CRO 26 дней назад

    I don't mind 4 legged interruptions....😁

    • @simonswiss
      @simonswiss 26 дней назад

      Haha yeah I may as well give them some screen time if they're going to interrupt 😅

  • @soviut303
    @soviut303 26 дней назад

    While I'm glad text wrap balanced exists now, I still have PTSD from the mid 2000s when designers (who were always designing for desktop) would demand bespoke headline wrapping. We wound up having to use all sort of inline <br> tags with media queries so they only appeared at certain breakpoints. Inevitably, it always broke somehow. This was also around the time that box backgrounds on text were popular, but the effect couldn't wrap. EDIT: you never showed whether that rotated background effect could split across lines.

    • @simonswiss
      @simonswiss 26 дней назад

      Ah yes, I also have PTSD with this 😅 - and nope, the rotated background effect doesn't wrap the way I built it 🙉

  • @M1a2n3o43
    @M1a2n3o43 26 дней назад

    Make more video likes this please i have learned a lot from you 👍

    • @simonswiss
      @simonswiss 26 дней назад

      Thank you! Making videos is all I want to do, but there are so many things taking precedence over it in my life right now 😅

    • @M1a2n3o43
      @M1a2n3o43 26 дней назад

      @@simonswiss thank you for taking the time to do these videos. whenever you have time we will be waiting 😉

    • @simonswiss
      @simonswiss 26 дней назад

      @@M1a2n3o43 🤗

  • @jordirivero
    @jordirivero 26 дней назад

    Nice video

  • @codecreate3466
    @codecreate3466 Месяц назад

    Great product! Does keystatic support markdown (.md) files?

    • @simonswiss
      @simonswiss 26 дней назад

      Yes, you can use the `extension` option and set it to "md" to read from .md files with the MDX or Markdoc fields. keystatic.com/docs/fields/mdx#use-md-files-instead-of-mdx

  • @vaibhavsingh_08
    @vaibhavsingh_08 Месяц назад

    Great Video!!

  • @snimavat
    @snimavat 2 месяца назад

    It doesnt seem to be possible to use tailwind css classes on custom components - as tailwind is not included in admin page and so component preview doesnt use tailwind styles

    • @simonswiss
      @simonswiss 26 дней назад

      We're hoping to add Tailwind support one day - it would be very handy!

  • @snimavat
    @snimavat 2 месяца назад

    is it possible to use Astro component as a custom component ? or custom component has to be React components only?

    • @simonswiss
      @simonswiss 26 дней назад

      Unfortunately not - only React components, as Keystatic is a React app.

  • @mikespadafora4993
    @mikespadafora4993 2 месяца назад

    Great video! Here is the best of both worlds (twMerge & clsx). Has been working perfectly for me! import type { ClassValue } from "clsx"; import clsx from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

  • @John-eq5cd
    @John-eq5cd 2 месяца назад

    Very clear and useful, thanks !

    • @simonswiss
      @simonswiss 2 месяца назад

      Glad to hear that!

  • @SreenathG-fk4rw
    @SreenathG-fk4rw 2 месяца назад

    where is the code?

    • @simonswiss
      @simonswiss 2 месяца назад

      Can't share it because it's using paidTailwind UI components.

  • @mik3T7
    @mik3T7 2 месяца назад

    Hi, it is possibledo previews with astro?

  • @michaeltyiska
    @michaeltyiska 3 месяца назад

    This is pure Gold! You should definitely have more views and subscribers.

    • @simonswiss
      @simonswiss 2 месяца назад

      Wow, thank you! I need to be more consistent with my video output as well 😅

  • @simonk2036
    @simonk2036 3 месяца назад

    What is your VSCode Theme? And do you have published your Settings somewhere ?

    • @simonswiss
      @simonswiss 2 месяца назад

      It's Night Owl by Sarah Drasner

  • @ronaldtejada8846
    @ronaldtejada8846 3 месяца назад

    Awesome Video buddie!

  • @ronniedinoy8440
    @ronniedinoy8440 3 месяца назад

    Salamat idol...

  • @faheemulhassan7614
    @faheemulhassan7614 3 месяца назад

    well explained. I was beginner learner and stuck in this problem. went thorugh your video and just fully satisfied. Thank you so much !!

  • @brencancer
    @brencancer 3 месяца назад

    i was just reading the portable mic studio article, great audio btw, it works.

    • @simonswiss
      @simonswiss 2 месяца назад

      Haha I loved my DIY recording booth :)

  • @DanteMishima
    @DanteMishima 3 месяца назад

    I applaud the people who there for the live. Light to Dark to Light to Dark and no-one said anything. 56 minutes in and I'm in pain

    • @simonswiss
      @simonswiss 26 дней назад

      Keep them sunglasses on - it should help!

  • @question-du-temps
    @question-du-temps 3 месяца назад

    Thanks ! I wanna know your vs code setup config. I love it.

  • @DanteMishima
    @DanteMishima 3 месяца назад

    Hey simon.... Would you please do a video of deploying an Astro Kestatic project?

  • @cole1515
    @cole1515 3 месяца назад

    P r o m o S M

  • @motoshan
    @motoshan 4 месяца назад

    Thank you Simon 🙏 Love that you're not just working on Keystatic, but getting on video to show us how to use it in projects with your recent videos. I'm going to implement Keystatic in a client website over this weekend. 🇦🇺 Sydney

    • @simonswiss
      @simonswiss 2 месяца назад

      Thank you so much!

  • @simonswiss
    @simonswiss 4 месяца назад

    Haha so near the end of the stream I go on the docs and realise that the MDX and Markdoc fields don't have the "SOON" badge next to them... and assume this is a bug. Well NOPE, they landed in stable (fields.mdx and fields.markdoc) while I was on stream 🎉

  • @jehezken
    @jehezken 4 месяца назад

    Hey simon !! Thank you for your content, I hope there will be more to come. May I know the name of the browser you use?

    • @simonswiss
      @simonswiss 2 месяца назад

      It's called ARC 🤙

  • @MG-wx8yx
    @MG-wx8yx 4 месяца назад

    Woow!!! Great tutorial brother. So useful content.

    • @simonswiss
      @simonswiss 2 месяца назад

      Glad you enjoyed it

  • @sVIIDragonfly
    @sVIIDragonfly 4 месяца назад

    23:32 why do you install prettier + tailwindcss as dependencies, not as devDependencies? quite interesting...

    • @simonswiss
      @simonswiss 2 месяца назад

      I typically install it as devDependencies, you're right. I see many projects where it's in dependencies as well - but it should indeed be in devDeps 🤙