Published on

6 Tips To Create A Food Nutrition Label With Tailwind CSS

Tags
CardsWidget
Food nutrition label

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Food nutrition label ui component

Basic food nutrition label following us fda standards (sort of).

Why use Tailwind CSS to create a Food nutrition label ui component?

  • It can make the building process of Food nutrition label ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Food nutrition label component file.

The preview of Food nutrition label ui component

Free download of the Food nutrition label's source code

The source code of Food nutrition label ui component

<!-- https://www.fda.gov/food/food-labeling-nutrition/changes-nutrition-facts-label -->
<div class="p-1 border-2 border-black font-sans w-72">
    <div class="text-4xl font-extrabold leading-none">Nutrition Facts</div>
    <div class="leading-snug">8 servings per container</div>
    <div class="flex justify-between font-bold border-b-8 border-black">
        <div>Serving size</div><div>2/3 cup (55g)</div>
    </div>
    <div class="flex justify-between items-end font-extrabold">
        <div>
            <div class="font-bold">Amount per serving</div>
            <div class="text-4xl">Calories</div>
        </div>
        <div class="text-5xl">45</div>
    </div>
    <div class="border-t-4 border-black text-sm pb-1">
        <div class="text-right font-bold pt-1 pb-1">% Daily value*</div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>
                <span class="font-bold">Total Fat</span> 8g
            </div>
            <div class="font-bold">10%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>Saturated Fat 1g</div>
            <div class="font-bold">5%</div>
        </div>
        <hr class="border-gray-500"/>
        <div>
            <span class="italic">Trans Fat</span> 8g
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>
                <span class="font-bold">Cholesterol</span> 0mg
            </div>
            <div class="font-bold">0%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>
                <span class="font-bold">Sodium</span> 160mg
            </div>
            <div class="font-bold">7%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>
                <span class="font-bold">Total Carbohydrate</span> 37g
            </div>
            <div class="font-bold">13%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div class="pl-4">
                Dietary Fiber 4g
            </div>
            <div class="font-bold">14%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="pl-4">
            Total Sugar 12g
            <div class="pl-4">
                <hr class="border-gray-500"/>
                <div class="flex justify-between">
                    <div>Includes 10g Added Sugars</div>
                    <div class="font-bold">20%</div>
                </div>
            </div>
        </div>
        <hr class="border-gray-500"/>
        <div>
            <span class="font-bold">Protein</span> 3g
        </div>
    </div>
    <div class="border-t-8 border-black pt-1 text-sm">
        <div class="flex justify-between">
            <div>Vitamin D 2mcg</div>
            <div>10%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>Calcium 260mg</div>
            <div>20%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>Iron 8mg</div>
            <div>45%</div>
        </div>
        <hr class="border-gray-500"/>
        <div class="flex justify-between">
            <div>Potassium 240mg</div>
            <div>6%</div>
        </div>
        <div class="border-t-4 border-black flex leading-none text-xs pt-2 pb-1">
            <div class="pr-1">*</div>
            <div>The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</div>
        </div>
    </div>
</div>

How to create a Food nutrition label with Tailwind CSS?

Install tailwind css of verion 2.0.2

Use the script html tag to import the script of Tailwind CSS of the version 2.0.2

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to create a Food nutrition label component

  • p-1
  • border-2
  • border-black
  • w-72
  • text-4xl
  • flex
  • border-b-8
  • text-5xl
  • border-t-4
  • text-sm
  • pb-1
  • text-right
  • pt-1
  • border-gray-500
  • pl-4
  • border-t-8
  • text-xs
  • pt-2
  • pr-1

19 steps to create a Food nutrition label component with Tailwind CSS

  1. Control the padding on all sides of an element to 0.25rem using the p-1 utilities.

  2. Control the border color of an element to 0.5rem using the border-2 utilities.

  3. Control the border color of an element to black using the border-black utilities.

  4. Use w-72 to set an element to a fixed width(18rem).

  5. Control the text color of an element to 4xl using the text-4xl utilities.

  6. Use flex to create a block-level flex container.

  7. Control the border color of an element to b-8 using the border-b-8 utilities.

  8. Control the text color of an element to 5xl using the text-5xl utilities.

  9. Control the border color of an element to t-4 using the border-t-4 utilities.

  10. Control the text color of an element to sm using the text-sm utilities.

  11. Control the padding on bottom side of an element to 0.25rem using the pb-1 utilities.

  12. Control the text color of an element to right using the text-right utilities.

  13. Control the padding on top side of an element to 0.25rem using the pt-1 utilities.

  14. Control the border color of an element to gray-500 using the border-gray-500 utilities.

  15. Set the left padding of the element to 1rem using the pl-4 utilities class

  16. Control the border color of an element to t-8 using the border-t-8 utilities.

  17. Control the text color of an element to xs using the text-xs utilities.

  18. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

  19. Control the padding on right side of an element to 0.25rem using the pr-1 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a Food nutrition label components, learn and follow along to implement your own components.