Creating a project with Tailwind

Mitch Winkel-Davis
Aug 25 · 2 min read

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: mkdir myProject && cd myProject
  2. Initialise the NPM directory: npm init
  3. Install tailwind, postcss (for processing) and autoprefixer (adds vendor prefixes to your code): npm install tailwindcss postcss-cli autoprefixer
  4. Create a tailwind config file (tailwind.config.js): npx tailwind init
  5. Create a postcss.config.js file, and copy the exports from below¹: touch postcss.config.js
  6. Create a the tailwind css file & directory, and copy the includes from below²: mkdir css && touch css/tailwind.css
  7. Add a build script to package.json: "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  8. Build the files: npm run build
  9. Create your index.html file, and include the built css: <link rel="stylesheet" href="build/tailwind.css">
  10. Follow the Tailwind CSS docs and get designing!
[1] postcss.config.jsmodule.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
[2] tailwind.css@tailwind base;
@tailwind components;
@tailwind 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: npm install -g live-server
Start the server by passing the public directory: live-server public


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.

Mitch Winkel-Davis

Written by

Web Designer, Youth Worker & Coffee Lover. www.mitchwd.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade