Тёмный

Styling Markdown and CMS Content with Tailwind CSS 

Tailwind Labs
Подписаться 93 тыс.
Просмотров 46 тыс.
50% 1

In this video, we look at how to use the official `@tailwindcss/typography` plugin to easily add beautiful content styling to markdown, CMS content, or any other HTML where you don't have the ability to add utility classes to each element.
Plugin and documentation: github.com/tailwindlabs/tailw...

Наука

Опубликовано:

 

21 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 69   
@adhec
@adhec 3 года назад
Styling markdown tuts from you guys is something I'm waiting for!
@soviut303
@soviut303 3 года назад
A video about overriding settings on the typography plugin would be very useful. The format for this changed from Tailwind 1 to 2.
@eesusck
@eesusck 3 года назад
It's explained in the repo's readme.md 👍
@soviut303
@soviut303 3 года назад
@@eesusck Sure, but almost everything in these videos is documented elsewhere. Typography overrides are pretty involved so a video showing how it's done (and highlighting the differences between 1 and 2) would lower the barrier to entry.
@rfmiotto
@rfmiotto 3 года назад
Congratulations Tailwind Labs for producing these amazing video tutorials, which shows exactly how to use TailwindCSS and all its features! By just reading the docs from tailwindcss/typography I wasn't quite sure about how and why one should use it, but this video just cleared my mind.
@seunoyebode
@seunoyebode 3 года назад
🤩 so cool. Can’t wait to try this out with Nuxt Content Module
@paulsalele3844
@paulsalele3844 2 года назад
Tailwind is amazing, was stuggling to style my markdown from a CMS and all I needed was this installation. Thanks!!
@funkymag
@funkymag 2 года назад
Oooh, my friend after all I was looking for how to style HTML tags with Tailwind that I generated markdown all day yesterday. And today I am watching this video with an exciting coincidence. This is amazing! Thanks my friend Simon!
@JohnSmith-zl8rz
@JohnSmith-zl8rz 3 года назад
Thank You! typography is game changer when you dealing with CMS's.
@christostsangaris4785
@christostsangaris4785 2 года назад
Saved me from the trouble to create my own component to handle markdown! Tailwind is awesome!
@colton.padden
@colton.padden 3 года назад
This is just what I was looking for to use with Hugo. Thanks a bunch!
@Triyanox
@Triyanox 2 года назад
This is very great man I'm using the typography plug-in in my blog it's amazing !!
@mahdinaderian4053
@mahdinaderian4053 3 года назад
Loved the style of your music.
@dance2die
@dance2die 3 года назад
Ah shoulda known about this before styling blog posts coming from JSON... TW never fails to impress. Thank you for the awesome video.
@rickybarabba7866
@rickybarabba7866 3 года назад
Tailwind is getting better and better every release and I consider it the standard "de facto" for my daily front-end development.
@eddiebsteven
@eddiebsteven 3 года назад
Wizzy Wig! I've never heard anybody say it like that, I love it!
@amruthesh
@amruthesh Год назад
Hey, thanks. It was really helpful.
@jagjens
@jagjens 2 года назад
Such high production value 🤙
@enyelsequeira3619
@enyelsequeira3619 3 года назад
You guys are freaking crazyyyyy!!! Insane!!
@israelsenior6578
@israelsenior6578 2 года назад
The best! Thanks you so much dude.
@coltonwilliams1565
@coltonwilliams1565 3 года назад
This is nice. I was hoping it would show how to change fonts of headings vs fonts of paragraphs and links, etc
@alfieqashwa5257
@alfieqashwa5257 3 года назад
Thank you from Indonesia 🥰
@himanshusrivastava931
@himanshusrivastava931 3 года назад
Simon never blinks...!! 😮
@dugsiiye
@dugsiiye 2 года назад
Awesome Thanks Man
@rafi_45
@rafi_45 2 года назад
this is beautiful.
@zackplauche
@zackplauche 2 года назад
That whisper at 1:07 was hilarious 🤣🤣🤣🤣🤣🤣🤣🤣
@swyxTV
@swyxTV 3 года назад
lovely tutorial! would also mention dark mode.
@longtimedeveloper6498
@longtimedeveloper6498 3 года назад
Thank you for a great product and tutorial. On my system, I need to change the h1 color on a single div. How can I tell prose to use white color on this div? Currently I've added a class using !important to get the text color to change. Is there a "prose" way? Thank you!
@lamanguedouce1189
@lamanguedouce1189 3 года назад
Awesome ! So if I'm very lazy I can even use this with a normal html file 😎
@michal_kuczek
@michal_kuczek 3 года назад
this is where WordPress Gutenberg editor can be awesome in combination with tailwind, it's easy to add programmatically tailwind classes to Gutenberg blocks
@unnhao
@unnhao 2 года назад
wow, nice! it's so useful!!!!!
@ShovenaFamily
@ShovenaFamily 3 года назад
I will try it
@Shubham-xh9nz
@Shubham-xh9nz 3 года назад
can we get a course or yt series ofr new pattern and best practices ? I am allergic to css but this library makes me think again and again to try it out.
@SreekumarMenonPhotography
@SreekumarMenonPhotography 3 года назад
shhhhh! Typography plugin is awesome!
@jujijiju6929
@jujijiju6929 3 года назад
Man, we have the same exact hairstyle.
@TheKMov
@TheKMov 3 года назад
Thanks for the video. Do you have a WYSIWYG editor recommendation that plays nicely with this? I've tried Quilljs, but the break line produce a huge space between paragraphs since they generate 'p' tag with 'br' inside.
@swabhyaasgatecs2733
@swabhyaasgatecs2733 3 года назад
Maybe you can use shift+Enter, Instead of Enter, Works for me in Ckeditor
2 года назад
I just want to cry, I should have seen this video 4 hours ago.
@austinimbastari2760
@austinimbastari2760 3 месяца назад
omg thank you
@johnlin6121
@johnlin6121 2 года назад
Cool!
@_parassolanki
@_parassolanki 3 года назад
I really like tailwind css framework but i don't like for styling one element i have to use so many utility class in my HTML
@thibautbayong1678
@thibautbayong1678 3 года назад
hello, how integrate tailwind-typography with laravel
@oomusou
@oomusou 3 года назад
amazing
@fabio5antos
@fabio5antos Год назад
How is the situation of youtube, Facebook and Twitter links, where they load the video and the Card of the information of that link, which are added in the text editors of the CMS WordPress?
@belkocik
@belkocik 2 года назад
how to style image inside paragraph? tried like .cms-content p > img { mx-auto } and I got "container" and "mx-auto" in the component that renders a data from CMS. Haven't worked
@SusanthCom
@SusanthCom 3 года назад
Thanks 👍❤️ . Could you please share, What's that template system used in this project
@LouisAgyapong
@LouisAgyapong 3 года назад
I think he’s using nunjucks
@SusanthCom
@SusanthCom 3 года назад
@@LouisAgyapong Thanks 👍❤️
@accuratecalcs
@accuratecalcs 2 года назад
Can the typography plugin not be used for HTML markup? I would love to have access to a professionally curated set of CSS utilities. I want to pick the font, and then let Tailwind CSS do the work. :-)
@marioemblem
@marioemblem 3 года назад
Can the font family be changed?
@ngonimugumwa6374
@ngonimugumwa6374 3 года назад
If you mean an exterior font from Google fonts or something then yes. You’ll usually add that to your Tailwind config file. Now that JIT has been released I’m not sure if you can just link it via an html link tag and then reference it inline.
@imprasna2539
@imprasna2539 3 года назад
I need a help, to know how is he calling the cms content. I couldn't get it. Please do help me
@Schlumpfpirat
@Schlumpfpirat Год назад
How to use njk files? 11ty? Thought you were using Vite
@SuboptimalEng
@SuboptimalEng 3 года назад
omg 😍
@rahulsriram6295
@rahulsriram6295 3 года назад
What about lists? HTML ul, ol and li are unstyled due to thee pre-flight of TailwindCSS
@TailwindLabs
@TailwindLabs 3 года назад
Not after you add the `prose` class to the wrapping element 👍🏻
@rahulsriram6295
@rahulsriram6295 3 года назад
@@TailwindLabs That's excellent. All these plugins for forms, typography & JIT, Tailwind is going places
@beeman-dev
@beeman-dev 3 года назад
I wish prose worked with Dark mode! 🙏
@Svish_
@Svish_ 3 года назад
Doesn't it just inherit base colors? So if dark mode changes base color, prose should too?
@beeman-dev
@beeman-dev 3 года назад
@@Svish_ it should but it doesn't. There is an issue in the tailwind typography repo
@RicoTrevisan
@RicoTrevisan Год назад
The title of the video says Markdown, but your CMS content is in HTML, no? Which markdown to html converter do you use?
@gavenblsn4753
@gavenblsn4753 3 года назад
whats your editor font?
@dyslexicunt
@dyslexicunt 3 года назад
It's 'Operator Mono' by Hoefler&Co
@bluemwhitew
@bluemwhitew 3 года назад
Shhh! 🤫
@chanandlerbong6176
@chanandlerbong6176 2 года назад
01:08 😂 I don't know if you are the kid or you treating us like kids
@ApoorvMote
@ApoorvMote 3 года назад
Main advantage of tailwind is design system that makes noob designer look really good. Downside is critical CSS for page is not added until bloated sheet is loaded.
@Svish_
@Svish_ 3 года назад
Use their PurgeCSS integration, or their new jit compiler. I end up with an even smaller CSS-file than I would otherwise.
@ApoorvMote
@ApoorvMote 3 года назад
@@Svish_ First of all I use them both. Secondly size of CSS file is unimportant. Issue is that it makes another network request to download CSS file. If the critical CSS was embeded in the HTML file then before full CSS file was downloaded you have styling. And its super critical for Web Vitals i.e. LCP, FID, CLS. So yes the current workaround is I embed entire website CSS inside the HTML. But unfortunately purgeCSS generates CSS for whole website not for per page basis. And as your site gets more pages then more unnecessary CSS gets added.
@learnfronteasy9642
@learnfronteasy9642 2 года назад
hi I'm learning Tailwind in Persian language
Далее
Theming Tailwind with CSS Variables
27:24
Просмотров 121 тыс.
В GEOMETRY DASH СДЕЛАЛИ GTA
00:27
Просмотров 524 тыс.
ПОЮ НАРОДНЫЕ ПЕСНИ🪗
3:19:41
Просмотров 1,8 млн
Tailwind-Merge Is Incredibly Useful - And Here's Why!
12:58
10 Tailwind Classes I Wish I Knew Earlier
13:31
Просмотров 171 тыс.
What's new in Tailwind CSS v3.0?
26:33
Просмотров 182 тыс.
I WISH I Knew These Tailwind Tips Earlier
9:15
Просмотров 175 тыс.
What's New in Tailwind CSS v2.2
21:21
Просмотров 51 тыс.
Rebuilding iOS 15 with Tailwind CSS
20:19
Просмотров 76 тыс.
The Only Markdown Crash Course You Will Ever Need
22:16
Tailwind CSS V4 is SO Good!
8:51
Просмотров 33 тыс.
APPLE дают это нам БЕСПЛАТНО!
1:01
Просмотров 664 тыс.
$1 vs $100,000 Slow Motion Camera!
0:44
Просмотров 25 млн
ОБСЛУЖИЛИ САМЫЙ ГРЯЗНЫЙ ПК
1:00