Life's a garden. Dig it.
You can spruce up your content with Tailwind CSS - a CSS framework packed with utility classes for making grids, changing colors, adding borders, etc.
Important!
This page is not meant to be a comprehensive reference of everything that's possible to do with Tailwind CSS. For that, check out Tailwind's own documentation.
Examples¶
These examples rely heavily on injecting HTML elements into markdown.
Colors¶
:icon[carrot]{.stroke-orange-200}
:icon[carrot]{.stroke-orange-400}
:icon[carrot]{.stroke-orange-600}
:icon[carrot]{.stroke-orange-800}
:span[Hello World]{.text-red-500}
:span[Hello World]{.text-slate-600}
:span[Hello World]{.text-emerald-400}
:span[Hello World]{.text-cyan-500} Hello World
Hello World
Hello World
Hello World
:span[Hello World]{.text-white .bg-red-500}
:span[Hello World]{.text-white .bg-slate-600}
:span[Hello World]{.text-white .bg-emerald-400}
:span[Hello World]{.text-white .bg-cyan-500} Hello World
Hello World
Hello World
Hello World
Grid layout¶
::::div{ .grid .grid-cols-2 .gap-4 .text-white }
:::div{ .text-center .col-span-1 .bg-fuchsia-500 .rounded-lg }
01
:::
:::div{ .text-center .col-span-1 .bg-fuchsia-500 .rounded-lg }
02
:::
:::div{ .text-center .col-span-2 .bg-fuchsia-500 .rounded-lg }
03
:::
::::01
02
03
Flex layout¶
::::div{.flex .flex-row .text-white .gap-x-4 .justify-center}
:::div{.bg-blue-500 .w-14 .h-14 .rounded-lg .flex .items-center .justify-center}
01
:::
:::div{.bg-blue-500 .w-14 .h-14 .rounded-lg .flex .items-center .justify-center}
02
:::
:::div{.bg-blue-500 .w-14 .h-14 .rounded-lg .flex .items-center .justify-center}
03
:::
::::01
02
03
::::div{.flex .flex-row .text-white .gap-x-4 .justify-around}
...
::::01
02
03
::::div{.flex .flex-row .text-white .gap-x-4 .justify-between}
...
::::01
02
03
CSS Variants¶
Tailwind's CSS variants let you conditionally apply CSS classes.
:span[I'm a different color in dark/light mode
]{.dark:text-white} I'm a different color in dark/light mode
:::div{.p-4 .hover:shadow-xl .shadow-amber-500}
I get a shadow when you hover over me.
:::I get a shadow when you hover over me.
Note
Scipress supports many, but not all Tailwind CSS classes and variants. If we're missing something you need, let us know and we'll see about adding it.