Tailwindcss
# JIT, watch, tailwind.config.js, minify
npx tailwindcss -o tailwind.css --watch --jit --purge="./**/*.html" -c "tailwind.config.js" --minify
Outstanding Octopus
# JIT, watch, tailwind.config.js, minify
npx tailwindcss -o tailwind.css --watch --jit --purge="./**/*.html" -c "tailwind.config.js" --minifynpx tailwindcss init
//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
//tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
<div class="space-y-4">
<div class="w-96 bg-white shadow rounded">
w-96
</div>
<div class="w-80 l-50 bg-white shadow rounded">
w-80
</div>
<div class="w-72 bg-white shadow rounded">
w-72
</div>
<div class="w-64 bg-white shadow rounded">
w-64
</div>
<div class="w-60 bg-white shadow rounded">
w-60
</div>
<div class="w-56 bg-white shadow rounded">
w-56
</div>
<div class="w-52 bg-white shadow rounded">
w-52
</div>
<div class="w-48 bg-white shadow rounded">
w-48
</div>
</div><ul class="space-y-4">
<li> <div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-40 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-32 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-24 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-20 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-16 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-12 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
<li> <div class="w-10 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li>
</ul>// source/_assets/sass/main.scss
@tailwind preflight;
@tailwind components;
// Code syntax highlighting,
// powered by https://highlightjs.org
@import '~highlight.js/styles/a11y-light.css';
@import 'base';
@import 'navigation';
@import 'documentation';
@tailwind utilities;npx tailwindcss -o tailwind.css --watch --jit --purge="./**/*.html"npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"