Tailwindcss was recently updated which came with quite a few changes for stuff like colours and key names - worth checking out this if you stumble across any older tutorials for tailwindcss and are wondering why stuff isn't working when using the latest version :)Īlso, due to the vast amount of utilities and variations, out of the box Tailwind is pretty large, 58.8kb gzipped compared to Bootstrap's 22.7kb or Bulma's 23kb. Having everything available for creating apps from the ground up straight out of the box, including all the media queries and variants like focus/hover etc. I've been using tailwindcss for the last few months and can honestly say it's my favourite css 'framework' so far. But mind you it's not a recommended choice to use the CDN option because some features that make tailwind awesome won't be available for use.
Tailwindcss unpkg install#
To get started with TailwindCSS in your project you will need to install it as a dependency or you can use it as a CDN.
Component-friendly: TailwindCSS is also a component friendly CSS framework, what this means is that instead of having repeated utility classes for your UI, you can combine common patterns and abstract it out as component classes that eventually become reusable.You're the limit as far as customization is concerned with TailwindCSS. You can customize your own colors, border-sizes, shadows, spacing and a whole lot more. Customization on the fly: Tailwind is easily customizable to fit your needs.One of the common reasons why I think I got love struck with TailwindCSS is that I found out I can get the following out of the box: It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. TailwindCSS is a utility first CSS framework for building custom user interface designs. In this article, I’ll be introducing you to TailwindCSS and why I think it is a different ball game entirely with useful examples. Until recently I decided to give it another look after I saw the recent release of v1 and to my greatest surprise, I fell in love with TailwindCSS. There is no custom CSS and all of the images are from Unsplash.
Each is responsive and uses Tailwind's default colors.
Tailwindcss unpkg how to#
Imagine my thoughts when I first saw the TailwindCSS Framework, in my head I already thought this was one of the usual frameworks like Bootstrap, Bulma, and Foundation, etc that I have tried using before and I took my eyes off it for a second. Tailwind (Cards) By Jesse Schneider This CodePen user demonstrates how to create a Tailwind card without an image along with a stacked and a horizontal card with images.