tailwindcss

1npx tailwindcss -i style.css -o tailwind.css --watch --jit --purge="./**/*.html" -c "tailwind.config.js" --minify

1<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
2

1# JIT, watch, tailwind.config.js, minify
2npx tailwindcss -o tailwind.css --watch --jit --purge="./**/*.html" -c "tailwind.config.js" --minify

1<div class="flex">
2  <div class="flex-none w-48 relative">
3    <img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" />
4  </div>
5  <form class="flex-auto p-6">
6    <div class="flex flex-wrap">
7      <h1 class="flex-auto text-xl font-semibold">
8        Classic Utility Jacket
9      </h1>
10      <div class="text-xl font-semibold text-gray-500">
11        $110.00
12      </div>
13      <div class="w-full flex-none text-sm font-medium text-gray-500 mt-2">
14        In stock
15      </div>
16    </div>
17    <div class="flex items-baseline mt-4 mb-6">
18      <div class="space-x-2 flex">
19        <label>
20          <input class="w-9 h-9 flex items-center justify-center bg-gray-100 rounded-lg" name="size" type="radio" value="xs" checked>
21          XS
22        </label>
23        <label>
24          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="s">
25          S
26        </label>
27        <label>
28          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="m">
29          M
30        </label>
31        <label>
32          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="l">
33          L
34        </label>
35        <label>
36          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="xl">
37          XL
38        </label>
39      </div>
40      <div class="ml-auto text-sm text-gray-500 underline">Size Guide</div>
41    </div>
42    <div class="flex space-x-3 mb-4 text-sm font-medium">
43      <div class="flex-auto flex space-x-3">
44        <button class="w-1/2 flex items-center justify-center rounded-md bg-black text-white" type="submit">Buy now</button>
45        <button class="w-1/2 flex items-center justify-center rounded-md border border-gray-300" type="button">Add to bag</button>
46      </div>
47      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-gray-400 border border-gray-300" type="button" aria-label="like">
48        <svg width="20" height="20" fill="currentColor">
49          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
50        </svg>
51      </button>
52    </div>
53    <p class="text-sm text-gray-500">
54      Free shipping on all continental US orders.
55    </p>
56  </form>
57</div>
58
59

1<ul class="space-y-4">  
2  	<li>    <div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
3	<li>    <div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
4    <li>    <div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
5    <li>    <div class="w-40 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
6    <li>    <div class="w-32 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
7    <li>    <div class="w-24 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
8    <li>    <div class="w-20 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
9	<li>    <div class="w-16 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
10	<li>    <div class="w-12 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>  
11	<li>    <div class="w-10 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>  </li>
12</ul>

1npx tailwindcss -o tailwind.css --watch --jit --purge="./**/*.html"

1npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"