var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),x=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},c=(a,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of u(e))!k.call(a,l)&&l!==s&&t(a,l,{get:()=>e[l],enumerable:!(i=h(e,l))||i.enumerable});return a};var w=(a,e,s)=>(s=a!=null?m(N(a)):{},c(e||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>c(t({},"__esModule",{value:!0}),a);var r=g((M,o)=>{o.exports=_jsx_runtime});var b={};x(b,{default:()=>p,frontmatter:()=>y});var n=w(r()),y={title:"Tailwind CSS V4 Styling MDX Content",date:"2025-05-20",lastmod:"2025-05-20",language:"en",tags:["blog guides","tailwindcss"],series:{order:2,title:"Blog Guides"},authors:["default"],draft:!1,layout:"PostBanner",featured:!0,images:["/static/images/twitter-card.png"],summary:"Learn how to quickly create a responsive image gallery using Tailwind CSS and Markdown HTML."};function d(a){let e={code:"code",h2:"h2",hr:"hr",img:"img",p:"p",pre:"pre",span:"span",...a.components},{Community:s}=e;return s||v("Community",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"introduction",children:"Introduction"}),(0,n.jsx)(e.p,{children:"This guide walks you through integrating Tailwind's utility classes directly in your Markdown files."}),(0,n.jsx)(e.p,{children:"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes."}),(0,n.jsxs)(e.p,{children:["Features images served using ",(0,n.jsx)(e.code,{children:"next/image"})," component. The locally stored images are located in a folder with the following path: ",(0,n.jsx)(e.code,{children:"/static/images/canada/[filename].jpg"})]}),(0,n.jsx)(e.p,{children:"Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes."}),(0,n.jsx)(e.hr,{}),(0,n.jsx)(e.h2,{id:"photo-gallery",children:"Photo Gallery"}),(0,n.jsxs)("div",{className:"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2",children:[(0,n.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",children:(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{alt:"Maple",src:"/blog/static/images/canada/maple.jpg"})})}),(0,n.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",children:(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{alt:"Lake",src:"/blog/static/images/canada/lake.jpg"})})}),(0,n.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",children:(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{alt:"Mountains",src:"/blog/static/images/canada/mountains.jpg"})})}),(0,n.jsx)("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",children:(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{alt:"Toronto",src:"/blog/static/images/canada/toronto.jpg"})})})]}),(0,n.jsx)(e.h2,{id:"implementation",children:"Implementation"}),(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` ![Maple](/blog/static/images/canada/maple.jpg) `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"6",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` ![Lake](/blog/static/images/canada/lake.jpg) `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"9",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` ![Mountains](/blog/static/images/canada/mountains.jpg) `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"className"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"12",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` ![Toronto](/blog/static/images/canada/toronto.jpg) `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[(0,n.jsx)(e.span,{className:"token plain-text"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),(0,n.jsx)(e.p,{children:"With MDX + tailwindcss V4, one can interleave markdown in jsx as shown in the example code."}),(0,n.jsx)(e.h2,{id:"community",children:"Community"}),(0,n.jsx)(e.p,{children:"We're excited to see the community adopt Hyperse-io, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!"}),(0,n.jsx)(s,{locale:"en"})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function v(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(b);})(); ;return Component;

All Posts Of Tag Tailwindcss