Yesterday the first public release of Tailwind CSS was released as version 0.1.0, an alpha release. Tailwind CSS is a utility-based CSS framework by Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger.
The team has been stepping up the development and crafting beautiful documentation to go along with the framework, leading up to the first release, and sharing glimpses into the future and shape of the CSS framework.
The documentation feels stable for an alpha release library; you can tell that some acute attention to detail went into building the documentation.
What is Tailwind CSS?
The documentation says it best:
Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it’s not a UI kit.
It doesn’t have a default theme and there’s no built-in UI components.
On the flip side, it also has no opinion about how your site should look and doesn’t impose design decisions that you have to fight to undo.
If you’re looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.
But if you a want a huge head start implementing a custom design with its own identity, Tailwind might be just what you’re looking for.
Going through the default configuration file, Tailwind CSS has some serious flexibility and will give you the power to create your own “design system.” The configuration options give you a powerful engine to build your custom design.
Tailwind is available as an NPM module that you can install with NPM or Yarn:
# Using npm npm install tailwindcss --save-dev # Using Yarn yarn add tailwindcss --dev
Once you install the module, you can create a configuration file with the provided CLI utility:
# creates a tailwind.js file ./node_modules/.bin/tailwind init # Custom config filename if you'd like ./node_modules/.bin/tailwind init tailwind-config.js
You should check out the installation documentation for how you can use Tailwind with Webpack and Laravel Mix.
Adam Wathan wrote a well-received piece on CSS Utility Classes and “Separation of Concerns” that is an excellent primer for utility-based CSS, and you can check out the official documentation to learn more about using Tailwind.
Join the weekly newsletter and never miss out on new tips, tutorials, and more.
- Full-Stack Developer
Tampa, FL / Remote
Nu Image Medical
- PHP Developer
- Full-Stack Developer
Sioux Falls, SD or Remote
- Senior PHP / Vue.js Developer
Portland, OR / Remote
- Full Stack Vue.js Developer (Front-end focus)
- Senior Laravel Web Application Developer
NYC or Remote
- Laravel Developer (Vue, SQL Server)
Geneva, Switzerland / Remote
World Trade Organization
2017 Laravel Survey Results
Back in September, we partnered with LaraJobs to run a Laravel survey to see what types of projects people are taking…
New Route Methods introduced in Laravel 5.5
Laravel 5.5 shipped a couple of convenient shortcuts to the Laravel Router class that eliminates the need for creatin…