Published on

6 Steps To Build A vInvoice With Tailwind CSS Like A Pro In Under An Hour

Tags
PagesWidget
vInvoice

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 vInvoice ui component

Tailwindcss made invoice

Why use Tailwind CSS to build a vInvoice ui component?

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

The preview of vInvoice ui component

Free download of the vInvoice's source code

The source code of vInvoice ui component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://rsms.me/inter/inter.css');
        .sf { font-family: 'Inter', sans-serif; }
        .sign { font-family: 'Homemade Apple', cursive; }
    </style>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" integrity="sha512-Cv93isQdFwaKBV+Z4X8kaVBYWHST58Xb/jVOcV9aRsGSArZsgAnFIhMpDoMDcFNoUtday1hdjn0nGp3+KZyyFw==" crossorigin="anonymous" />
    <title>Invoice. #0196023</title>
</head>
<body class="bg-gray-200 print:bg-white md:flex lg:flex xl:flex print:flex md:justify-center lg:justify-center xl:justify-center print:justify-center sf">
<div class="lg:w-1/12 xl:w-1/4"></div>
<div class="w-full bg-white lg:w-full xl:w-2/3 lg:mt-20 lg:mb-20 lg:shadow-xl xl:mt-02 xl:mb-20 xl:shadow-xl print:transform print:scale-90">
  <header class="flex flex-col items-center px-8 pt-20 text-lg text-center bg-white border-t-8 border-green-700 md:block lg:block xl:block print:block md:items-start lg:items-start xl:items-start print:items-start md:text-left lg:text-left xl:text-left print:text-left print:pt-8 print:px-2 md:relative lg:relative xl:relative print:relative">
        <img class="w-3/6 h-auto md:w-1/4 lg:ml-12 xl:ml-12 print:px-0 print:py-0" src="https://via.placeholder.com/200x100.png" />
        <div class="flex flex-row mt-12 mb-2 ml-0 text-2xl font-bold md:text-3xl lg:text-4xl xl:text-4xl print:text-2xl lg:ml-12 xl:ml-12">INVOICE
          <div class="text-green-700">
            <span class="mr-4 text-sm">■ </span> #
          </div>
          <span id="invoice_id" class="text-gray-500">0196023</span>
        </div>
        <div class="flex flex-col lg:ml-12 xl:ml-12 print:text-sm">
          <span>Issue date: 2020.09.06</span>
          <span>Paid date: 2020.09.07</span>
          <span>Due date: 2020.10.06</span>
        </div>
        <div class="px-8 py-2 mt-16 text-3xl font-bold text-green-700 border-4 border-green-700 border-dotted md:absolute md:right-0 md:top-0 md:mr-12 lg:absolute lg:right-0 lg:top-0 xl:absolute xl:right-0 xl:top-0 print:absolute print:right-0 print:top-0 lg:mr-20 xl:mr-20 print:mr-2 print:mt-8">PAID</div>
        <contract class="flex flex-col m-12 text-center lg:m-12 md:flex-none md:text-left md:relative md:m-0 md:mt-16 lg:flex-none lg:text-left lg:relative xl:flex-none xl:text-left xl:relative print:flex-none print:text-left print:relative print:m-0 print:mt-6 print:text-sm">
          <span class="font-extrabold md:hidden lg:hidden xl:hidden print:hidden">FROM</span>
          <from class="flex flex-col">
              <span id="company-name" class="font-medium">BroHosting</span>
              <span id="company-country"><span class="flag-icon flag-icon-us"></span> United States</span>
              <div class="flex-row">
                  <span id="c-city">New York</span>,
                  <span id="c-postal">NY 10023</span>
              </div>
              <span id="company-address">98-2 W 67th St</span>
              <span id="company-phone">+12124567777</span>
              <span id="company-mail">[email protected]</span>
          </from>
          <span class="mt-12 font-extrabold md:hidden lg:hidden xl:hidden print:hidden">TO</span>
          <to class="flex flex-col md:absolute md:right-0 md:text-right lg:absolute lg:right-0 lg:text-right print:absolute print:right-0 print:text-right">
          <span id="person-name" class="font-medium">Cloud Solutions Inc</span>
              <span id="person-country"><span class="flag-icon flag-icon-hu"></span> Hungary</span>
              <div class="flex-row">
                  <span id="p-postal">3100</span>
                  <span id="p-city">Salgótarján</span>,
              </div>
              <span id="person-address">Rákóczi út 12.</span>
              <span id="person-phone">+36300000000</span>
              <span id="person-mail">[email protected]</span> 
          </to>
      </contract>
    </header>
    <hr class="border-gray-300 md:mt-8 print:hidden">
    <content>
      <div id="content" class="flex justify-center md:p-8 lg:p-20 xl:p-20 print:p-2">
          <table class="w-full text-left table-auto print:text-sm" id="table-items">
              <thead>
                <tr class="text-white bg-gray-700 print:bg-gray-300 print:text-black">
                  <th class="px-4 py-2">Item</th>
                  <th class="px-4 py-2 text-right">Qty</th>
                  <th class="px-4 py-2 text-right">Unit Price</th>
                  <th class="px-4 py-2 text-right">Subtotal</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="px-4 py-2 border">Shared Hosting - Simple Plan (Monthly)</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">1</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$2.45</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$2.45</td>
                </tr>
                <tr class="bg-gray-100 print:bg-gray-100">
                  <td class="px-4 py-2 border">Domain Registration - coolstory.bro - (100% Free for First Year)</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">1</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$12.00</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$0.00</td>
                </tr>
                <tr>
                  <td class="px-4 py-2 border">
                      Dedicated Server - Eco Boost
                      <div class="flex flex-col ml-4 text-xs print:hidden">
                          <span class="flex items-center">Intel® Xeon® Processor E5-1607 v3</span>
                          <span class="uppercase">32GB DDR4 RAM</span>
                          <span>1TB NVMe / Raid 1+0</span>
                          <span>1Gbps Network + CloudFlare DDoS protection</span>
                      </div>
                  </td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">1</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$214.99</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$214.99</td>
                </tr>
                <tr class="bg-gray-100 print:bg-gray-100">
                  <td class="px-4 py-2 border ">
                      Dedicated Server - V8 Turbo
                      <div class="flex flex-col ml-4 text-xs print:hidden">
                        <span class="flex items-center">AMD EPYC™ 7702P</span>
                          <span class="uppercase">128GB DDR4 RAM</span>
                          <span>512GB NVMe / Raid 5</span>
                          <span>100Mbit Network + CloudFlare DDoS protection</span>
                      </div>
                  </td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">1</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$322.45</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$322.45</td>
                </tr>
                <tr class="text-white bg-gray-700 print:bg-gray-300 print:text-black" >
                  <td class="invisible"></td>
                  <td class="invisible"></td>
                  <td class="px-4 py-2 text-right border"><span class="flag-icon flag-icon-hu print:hidden"></span> VAT</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">27%</td>
                </tr>
                <tr class="text-white bg-gray-700 print:bg-gray-300 print:text-black" >
                  <td class="invisible"></td>
                  <td class="invisible"></td>
                  <td class="px-4 py-2 text-right border">TAX</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$145.77</td>
                </tr>
                <tr class="text-white bg-gray-700 print:bg-gray-300 print:text-black" >
                  <td class="invisible"></td>
                  <td class="invisible"></td>
                  <td class="px-4 py-2 font-extrabold text-right border">Total</td>
                  <td class="px-4 py-2 text-right border tabular-nums slashed-zero">$685.66</td>
                </tr>
              </tbody>
            </table>  
      </div>
  </content>
    <payment-history>
      <div class="mt-20 mb-20 print:mb-2 print:mt-2">
        <h2 class="text-xl font-semibold text-center print:text-sm">Payment History</h2>
        <div class="flex flex-col items-center text-center print:text-sm">
        <p class="font-medium">  2020/09/06 06:43PM CET <span class="font-light"><i class="lab la-cc-mastercard la-lg"></i> Credit Card Payment: $685.66 (Mastercard XXXX-XXXX-XXXX-0122)</span></p>
      </div>

     </div>
    </payment-history>
    <div class="flex flex-col items-center mb-24 leading-relaxed print:mt-0 print:mb-0">
      <span class="w-64 text-4xl text-center text-black border-b-2 border-black border-dotted opacity-75 sign print:text-lg">Csendes</span>
      <span class="text-center">Buyer</span>
  </div>
  <footer class="flex flex-col items-center justify-center pb-20 leading-loose text-white bg-gray-700 print:bg-white print:pb-0">
      <span class="mt-4 text-xs print:mt-0">Invoice generated on 2020/09/06 17:35</span>
      <span class="mt-4 text-base print:text-xs">© 2020 BroHosting.  All rights reserved.</span>
      <span class="print:text-xs">US - New York, NY 10023 98-2 W 67th St</span>
  </footer>
</div>
<div class="lg:w-1/12 xl:w-1/4"></div>  
</body>
</html>

How to build a vInvoice with Tailwind CSS?

Install tailwind css of verion 3.0.2

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

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

All the unility class needed to build a vInvoice component

  • bg-gray-200
  • print:bg-white
  • md:flex
  • lg:flex
  • xl:flex
  • print:flex
  • lg:w-1/12
  • xl:w-1/4
  • w-full
  • bg-white
  • lg:w-full
  • xl:w-2/3
  • lg:mt-20
  • lg:mb-20
  • xl:mt-02
  • xl:mb-20
  • flex
  • flex-col
  • px-8
  • pt-20
  • text-lg
  • text-center
  • border-t-8
  • border-green-700
  • md:block
  • lg:block
  • xl:block
  • print:block
  • md:text-left
  • lg:text-left
  • xl:text-left
  • print:text-left
  • print:pt-8
  • print:px-2
  • md:relative
  • lg:relative
  • xl:relative
  • print:relative
  • w-3/6
  • h-auto
  • md:w-1/4
  • lg:ml-12
  • xl:ml-12
  • print:px-0
  • print:py-0
  • flex-row
  • mt-12
  • mb-2
  • ml-0
  • text-2xl
  • md:text-3xl
  • lg:text-4xl
  • xl:text-4xl
  • print:text-2xl
  • text-green-700
  • mr-4
  • text-sm
  • text-gray-500
  • print:text-sm
  • py-2
  • mt-16
  • text-3xl
  • border-4
  • border-dotted
  • md:absolute
  • md:right-0
  • md:top-0
  • md:mr-12
  • lg:absolute
  • lg:right-0
  • lg:top-0
  • xl:absolute
  • xl:right-0
  • xl:top-0
  • print:absolute
  • print:right-0
  • print:top-0
  • lg:mr-20
  • xl:mr-20
  • print:mr-2
  • print:mt-8
  • m-12
  • lg:m-12
  • md:flex-none
  • md:m-0
  • md:mt-16
  • lg:flex-none
  • xl:flex-none
  • print:flex-none
  • print:m-0
  • print:mt-6
  • md:hidden
  • lg:hidden
  • xl:hidden
  • print:hidden
  • md:text-right
  • lg:text-right
  • print:text-right
  • border-gray-300
  • md:mt-8
  • md:p-8
  • lg:p-20
  • xl:p-20
  • print:p-2
  • text-left
  • table-auto
  • text-white
  • bg-gray-700
  • print:bg-gray-300
  • print:text-black
  • px-4
  • text-right
  • bg-gray-100
  • print:bg-gray-100
  • ml-4
  • text-xs
  • invisible
  • mt-20
  • mb-20
  • print:mb-2
  • print:mt-2
  • text-xl
  • mb-24
  • print:mt-0
  • print:mb-0
  • w-64
  • text-4xl
  • text-black
  • border-b-2
  • border-black
  • print:text-lg
  • pb-20
  • print:pb-0
  • mt-4
  • text-base
  • print:text-xs

136 steps to build a vInvoice component with Tailwind CSS

  1. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  2. Control the background color of an element to white using the print:bg-white utilitiesundefined.

  3. Use flex to create a block-level flex container at only medium screen sizes.

  4. Use flex to create a block-level flex container at only large screen sizes.

  5. Use flex to create a block-level flex container at only extremely large screen sizes.

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

  7. Use lg:w-1/12 to set an element to a fixed width(1/12) at only large screen sizes.

  8. Use xl:w-1/4 to set an element to a fixed width(1/4) at only extremely large screen sizes.

  9. Use w-full to set an element to a 100% based width.

  10. Control the background color of an element to white using the bg-white utilities.

  11. Use w-full to set an element to a 100% based width at only large screen sizes.

  12. Use xl:w-2/3 to set an element to a fixed width(2/3) at only extremely large screen sizes.

  13. Control the margin on top side of an element to 5rem at only large screen sizes using the lg:mt-20 utilities.

  14. Control the margin on bottom side of an element to 5rem at only large screen sizes using the lg:mb-20 utilities.

  15. Control the margin on top side of an element to 0.5rem at only extremely large screen sizes using the xl:mt-02 utilities.

  16. Control the margin on bottom side of an element to 5rem at only extremely large screen sizes using the xl:mb-20 utilities.

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

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

  19. Control the horizontal padding of an element to 2rem using the px-8 utilities.

  20. Control the padding on top side of an element to 5rem using the pt-20 utilities.

  21. Control the text color of an element to lg using the text-lg utilities.

  22. Control the text color of an element to center using the text-center utilities.

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

  24. Control the border color of an element to green-700 using the border-green-700 utilities.

  25. Use inline utilities to put the element on its own line and fill its parent at only medium screen sizes.

  26. Use inline utilities to put the element on its own line and fill its parent at only large screen sizes.

  27. Use inline utilities to put the element on its own line and fill its parent at only extremely large screen sizes.

  28. Use inline utilities to put the element on its own line and fill its parent.

  29. Control the text color of an element to left at only medium screen sizes using the md:text-left utilities.

  30. Control the text color of an element to left at only large screen sizes using the lg:text-left utilities.

  31. Control the text color of an element to left at only extremely large screen sizes using the xl:text-left utilities.

  32. Control the text color of an element to leftundefined using the print:text-left utilities.

  33. Control the padding on top side of an element to 2remundefined using the print:pt-8 utilities.

  34. Control the horizontal padding of an element to 0.5remundefined using the print:px-2 utilities.

  35. Use relative to position an element according to the normal flow of the document at only medium screen sizes.

  36. Use relative to position an element according to the normal flow of the document at only large screen sizes.

  37. Use relative to position an element according to the normal flow of the document at only extremely large screen sizes.

  38. Use relative to position an element according to the normal flow of the document.

  39. Use w-3/6 to set an element to a fixed width(3/6).

  40. Use h-auto to set an element to a fixed height(auto).

  41. Use md:w-1/4 to set an element to a fixed width(1/4) at only medium screen sizes.

  42. Control the margin on left side of an element to 3rem at only large screen sizes using the lg:ml-12 utilities.

  43. Control the margin on left side of an element to 3rem at only extremely large screen sizes using the xl:ml-12 utilities.

  44. Control the horizontal padding of an element to 0remundefined using the print:px-0 utilities.

  45. Control the vertical padding of an element to 0remundefined using the print:py-0 utilities.

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

  47. Control the margin on top side of an element to 3rem using the mt-12 utilities.

  48. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

  49. Control the margin on left side of an element to 0rem using the ml-0 utilities.

  50. Control the text color of an element to 2xl using the text-2xl utilities.

  51. Control the text color of an element to 3xl at only medium screen sizes using the md:text-3xl utilities.

  52. Control the text color of an element to 4xl at only large screen sizes using the lg:text-4xl utilities.

  53. Control the text color of an element to 4xl at only extremely large screen sizes using the xl:text-4xl utilities.

  54. Control the text color of an element to 2xlundefined using the print:text-2xl utilities.

  55. Control the text color of an element to green-700 using the text-green-700 utilities.

  56. Control the margin on right side of an element to 1rem using the mr-4 utilities.

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

  58. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  59. Control the text color of an element to smundefined using the print:text-sm utilities.

  60. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  61. Control the margin on top side of an element to 4rem using the mt-16 utilities.

  62. Control the text color of an element to 3xl using the text-3xl utilities.

  63. Control the border color of an element to 1rem using the border-4 utilities.

  64. Control the border color of an element to dotted using the border-dotted utilities.

  65. Use absolute to position an element outside of the normal flow of the document at only medium screen sizes, causing neighboring elements to act as if the element doesn’t exist.

  66. Use the md:right-0 utilities to set the right position of a positioned element to 0rem at only medium screen sizes.

  67. Use the md:top-0 utilities to set the top position of a positioned element to 0rem at only medium screen sizes.

  68. Control the margin on right side of an element to 3rem at only medium screen sizes using the md:mr-12 utilities.

  69. Use absolute to position an element outside of the normal flow of the document at only large screen sizes, causing neighboring elements to act as if the element doesn’t exist.

  70. Use the lg:right-0 utilities to set the right position of a positioned element to 0rem at only large screen sizes.

  71. Use the lg:top-0 utilities to set the top position of a positioned element to 0rem at only large screen sizes.

  72. Use absolute to position an element outside of the normal flow of the document at only extremely large screen sizes, causing neighboring elements to act as if the element doesn’t exist.

  73. Use the xl:right-0 utilities to set the right position of a positioned element to 0rem at only extremely large screen sizes.

  74. Use the xl:top-0 utilities to set the top position of a positioned element to 0rem at only extremely large screen sizes.

  75. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  76. Use the print:right-0 utilities to set the right position of a positioned element to 0remundefined.

  77. Use the print:top-0 utilities to set the top position of a positioned element to 0remundefined.

  78. Control the margin on right side of an element to 5rem at only large screen sizes using the lg:mr-20 utilities.

  79. Control the margin on right side of an element to 5rem at only extremely large screen sizes using the xl:mr-20 utilities.

  80. Control the margin on right side of an element to 0.5remundefined using the print:mr-2 utilities.

  81. Control the margin on top side of an element to 2remundefined using the print:mt-8 utilities.

  82. Control the margin on all sides of an element to 3rem using the m-12 utilities.

  83. Control the margin on all sides of an element to 3rem at only large screen sizes using the lg:m-12 utilities.

  84. Use flex to create a block-level flex container at only medium screen sizes.

  85. Control the margin on all sides of an element to 0rem at only medium screen sizes using the md:m-0 utilities.

  86. Control the margin on top side of an element to 4rem at only medium screen sizes using the md:mt-16 utilities.

  87. Use flex to create a block-level flex container at only large screen sizes.

  88. Use flex to create a block-level flex container at only extremely large screen sizes.

  89. Use flex to create a block-level flex containerundefined.

  90. Control the margin on all sides of an element to 0remundefined using the print:m-0 utilities.

  91. Control the margin on top side of an element to 1.5remundefined using the print:mt-6 utilities.

  92. Use hidden to set an element to display: none and remove it from the page layout at only medium screen sizes.

  93. Use hidden to set an element to display: none and remove it from the page layout at only large screen sizes.

  94. Use hidden to set an element to display: none and remove it from the page layout at only extremely large screen sizes.

  95. Use hidden to set an element to display: none and remove it from the page layout.

  96. Control the text color of an element to right at only medium screen sizes using the md:text-right utilities.

  97. Control the text color of an element to right at only large screen sizes using the lg:text-right utilities.

  98. Control the text color of an element to rightundefined using the print:text-right utilities.

  99. Control the border color of an element to gray-300 using the border-gray-300 utilities.

  100. Control the margin on top side of an element to 2rem at only medium screen sizes using the md:mt-8 utilities.

  101. Control the padding on all sides of an element to 2rem at only medium screen sizes using the md:p-8 utilities.

  102. Control the padding on all sides of an element to 5rem at only large screen sizes using the lg:p-20 utilities.

  103. Control the padding on all sides of an element to 5rem at only extremely large screen sizes using the xl:p-20 utilities.

  104. Control the padding on all sides of an element to 0.5remundefined using the print:p-2 utilities.

  105. Control the text color of an element to left using the text-left utilities.

  106. Use the table utilities to create elements that behave like their respective table elements.

  107. Control the text color of an element to white using the text-white utilities.

  108. Control the background color of an element to gray-700 using the bg-gray-700 utilities.

  109. Control the background color of an element to gray-300 using the print:bg-gray-300 utilitiesundefined.

  110. Control the text color of an element to blackundefined using the print:text-black utilities.

  111. Control the horizontal padding of an element to 1rem using the px-4 utilities.

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

  113. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  114. Control the background color of an element to gray-100 using the print:bg-gray-100 utilitiesundefined.

  115. Control the margin on left side of an element to 1rem using the ml-4 utilities.

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

  117. Use invisible to hide an element, but still maintain its place in the DOM, affecting the layout of other elements.

  118. Control the margin on top side of an element to 5rem using the mt-20 utilities.

  119. Control the margin on bottom side of an element to 5rem using the mb-20 utilities.

  120. Control the margin on bottom side of an element to 0.5remundefined using the print:mb-2 utilities.

  121. Control the margin on top side of an element to 0.5remundefined using the print:mt-2 utilities.

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

  123. Control the margin on bottom side of an element to 6rem using the mb-24 utilities.

  124. Control the margin on top side of an element to 0remundefined using the print:mt-0 utilities.

  125. Control the margin on bottom side of an element to 0remundefined using the print:mb-0 utilities.

  126. Use w-64 to set an element to a fixed width(16rem).

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

  128. Control the text color of an element to black using the text-black utilities.

  129. Control the border color of an element to b-2 using the border-b-2 utilities.

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

  131. Control the text color of an element to lgundefined using the print:text-lg utilities.

  132. Control the padding on bottom side of an element to 5rem using the pb-20 utilities.

  133. Control the padding on bottom side of an element to 0remundefined using the print:pb-0 utilities.

  134. Control the margin on top side of an element to 1rem using the mt-4 utilities.

  135. Control the text color of an element to base using the text-base utilities.

  136. Control the text color of an element to xsundefined using the print:text-xs utilities.

Conclusion

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