tailwindcss
# JIT, watch, tailwind.config.js, minify npx tailwindcss -o tailwind.css --watch --jit --purge="./**/*.html" -c "tailwind.config.js" --minify
tailwindcss
npx tailwindcss init //index.css @tailwind base; @tailwind components; @tailwind utilities; //tailwind.config.js module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }
Source: tailwindcss.com
tailwindcss
<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>
Source: tailwindcss.com
tailwindcss
// 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;
Source: jigsaw-docs-staging.tighten.co
tailwindcss
<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: tailwindcss.com
tailwindcss
npx tailwindcss -o tailwind.css --watch --jit --purge="./**/*.html"
tailwindcss
npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"
Source: blog.tailwindcss.com