Creating a project with Tailwind

Tailwind CSS is a utility-first CSS framework, designed to help you get up and running as quickly as possible. It’s tiny in comparison to it’s peers like Bootstrap, which includes hundreds of large, clunky, pre-built components.

Instead, Tailwind includes hundreds of simple, easy to chain together classes to style your pages. These classes can also be stripped and minified when you’re finished designing, resulting in a tiny css file.

Getting Started

  1. Create a new project:
  2. Initialise the NPM directory:
  3. Install tailwind, postcss (for processing) and autoprefixer (adds vendor prefixes to your code):
  4. Create a tailwind config file (tailwind.config.js):
  5. Create a postcss.config.js file, and copy the exports from below¹:
  6. Create a the tailwind css file & directory, and copy the includes from below²:
  7. Add a build script to package.json:
  8. Build the files:
  9. Create your build/index.html file, and include the built css:
  10. Follow the Tailwind CSS docs and get designing!
[1] postcss.config.jsmodule.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
[2] tailwind.css@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Running a live server

live-server is a simple live-reloading server that can dramatically speed up the development process:

Install the server globally: Start the server by passing the public directory:

Controlling file size

Once you’re finished designing, it’s important to reduce the file sizes, by stripping out extra css. The Tailwind CSS docs have a detailed guide explaining best practice, using purgecss.

Written by

Test Analyst, iOS Developer, Youth Worker & Coffee Lover. www.mitchwd.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store