This doc is part of the custom template documentation. You can see all the docs here!

Using TailwindCSS is optional and can include custom CSS. This guide will go into three of the most useful.

Flex
Flex controls how flex items grow and shrink.

<div class="flex">
<div class="flex-initial ...">
<!-- Won't grow, but will shrink if needed -->
</div>
<div class="flex-initial ...">
<!-- Won't grow, but will shrink if needed -->
</div>
<div class="flex-initial ...">
<!-- Won't grow, but will shrink if needed -->
</div>
</div>


Background Colour
Controls an elements background colour.

<div class="bg-purple-600 bg-opacity-100 ..."></div>
<div class="bg-purple-600 bg-opacity-75 ..."></div>
<div class="bg-purple-600 bg-opacity-50 ..."></div>
<div class="bg-purple-600 bg-opacity-25 ..."></div>
<div class="bg-purple-600 bg-opacity-0 ..."></div>


Text Colour
Controls the text colour of an element

<p class="text-purple-600 ..."></p>

Further TailwindCSS Documentation is available here.
Was this article helpful?
Cancel
Thank you!