Tailwind CSS Launches Its First Public Release

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?

Tailwind is a utility-first CSS framework for rapid UI development written in PostCSS and configured through JavaScript, which means it’s highly customizable by design.

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.

#Learn More

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.