![simonswiss](/img/default-banner.jpg)
- Видео 99
- Просмотров 592 462
simonswiss
Австралия
Добавлен 11 мар 2014
Swiss front-end designer/developer based in Sydney. Proud father of two. Surf, basketball, ukulele addict. Love learning, love teaching.
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
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
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
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?!
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
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
Am really enjoing this @simonswiss
i made one that merges a daiyui theme into the variables
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
Absolutely brilliant video. Your ways of teaching is simple and clear. I subscribe within 5 min watching your video.🎉🎉🎉🎉🎉
Found you on Laracasts, thanks for this great content and vibes man God bless 🙌
Why not use clamp for fluid font sizing?
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!
@@simonswiss good stuff :)
man you are some hot shit simon!
fantastic!
I really love the little intervention... Uff Uff.
Always room for a little corgi intervention!
Great video - Can also use box-decoration-break to make text pop
Yep that's a great one!
King is back
King of inconsistency 😅
i don't understand the break points in tailwind. like why does small have text-4xl when medium is 5 and lg is 3xl?
Not sure I understand the question, sorry.
I learned much more than I expected! Really well done, thanks :-)
That's amazing to hear! Motivates me to do more of these 🤗
Again, Really good videos! keep them coming 🙌
Thank you so much - love to hear this!
one of my very favourite lecturers is back, but Simon ... damn cut your hair, the previous haircut was 100 times better!
hahahaha one day! Gotta go through my midlife crisis long hair period first 🤣
@@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.
@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!
great video simon, are you working on any more upcoming courses by any chance?
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
@@simonswiss thats amazing thank you!
Haha salut, Simon! I didn't know about isolate, thanks for the lesson.
moi non plus
I love than in most my videos, people walk away with a random, unrelated little learning nugget ✨
Changing line height with text size using backslash was new to me. expecting more short hand like this
There are quite a few: the opacity modifier is another one for example.
I don't mind 4 legged interruptions....😁
Haha yeah I may as well give them some screen time if they're going to interrupt 😅
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.
Ah yes, I also have PTSD with this 😅 - and nope, the rotated background effect doesn't wrap the way I built it 🙉
Make more video likes this please i have learned a lot from you 👍
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 😅
@@simonswiss thank you for taking the time to do these videos. whenever you have time we will be waiting 😉
@@M1a2n3o43 🤗
Nice video
Thanks Jordi!
Great product! Does keystatic support markdown (.md) files?
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
Great Video!!
Thanks!
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
We're hoping to add Tailwind support one day - it would be very handy!
is it possible to use Astro component as a custom component ? or custom component has to be React components only?
Unfortunately not - only React components, as Keystatic is a React app.
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)); }
Very clear and useful, thanks !
Glad to hear that!
where is the code?
Can't share it because it's using paidTailwind UI components.
Hi, it is possibledo previews with astro?
This is pure Gold! You should definitely have more views and subscribers.
Wow, thank you! I need to be more consistent with my video output as well 😅
What is your VSCode Theme? And do you have published your Settings somewhere ?
It's Night Owl by Sarah Drasner
Awesome Video buddie!
Thank you!
Salamat idol...
well explained. I was beginner learner and stuck in this problem. went thorugh your video and just fully satisfied. Thank you so much !!
You are welcome!
i was just reading the portable mic studio article, great audio btw, it works.
Haha I loved my DIY recording booth :)
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
Keep them sunglasses on - it should help!
Thanks ! I wanna know your vs code setup config. I love it.
Hey simon.... Would you please do a video of deploying an Astro Kestatic project?
P r o m o S M
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
Thank you so much!
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 🎉
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?
It's called ARC 🤙
Woow!!! Great tutorial brother. So useful content.
Glad you enjoyed it
23:32 why do you install prettier + tailwindcss as dependencies, not as devDependencies? quite interesting...
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 🤙