Blog Spot!
Tailwind CSS - Forcing a footer to the bottom of the screen
With flex-box:
<body class="flex flex-col min-h-screen">
<main class="flex-1">content</main>
<footer>down</footer>
</body>Tailwind CSS - Two equal panels full height
<body>
<div class="flex">
<!-- left -->
<div class="bg-blue-900 h-screen w-1/2 text-center text-gray-100 flex items-center">
<div class="font-bold text-center w-full text-6xl">X</div>
</div>
<!-- right -->
<div class="bg-indigo-300 h-screen w-1/2 text-center text-gray-900 flex items-center">
<div class="font-bold text-center w-full text-6xl">Y</div>
</div>
</div>
</body>
Checking if a browser supports ES6
var supportsES6 = function() {
try {
new Function("(a = 0) => a");
return true;
}
catch (err) {
return false;
}
}();The critical test is the a = 0. All browsers supporting default parameters have a fairly complete support of ES6 — for example, Edge 13 will be rejected by this test despite a decent ES6 coverage.
Tailwind CSS - Responsive Navbar
Tutorial - Tailwind CSS - Pricing Table with
Tailwind CSS - Pricing Table with
In tailwind.config.js - add even docs
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'even'],
}