Tailwind Crash Course - Project Based Learning
Text Color
This is an other nice thing we have here and its the fact that we have already leaned all about the colors. Right?
So, all we have to change here is from bg to text. Let’s take a look at the formula below:
.text-{color}-{shade of color}
|
Colors |
Shades |
|
Black, white |
- |
|
gray, red, orange, teal, pink, purple, green, blue, indigo, yellow |
100-900 |
Got it? Alright, we already know how to use it and let’s code something now using all the text styles along with margins and paddings.
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="font-mono text-sm text-justify text-gray-400 bg-gray-900 p-6 m-4">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
</body>
</html>
// we are using font-mono
// text-sm to make it 14px
// text-justify to justify the alignment of text
// text-gray-400 and bg-gray-900 to add some colors
// p-6 and m-4 to give it some paddings and margins
