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
- Create a new project:
mkdir myProject && cd myProject - Initialise the NPM directory:
npm init - Install tailwind, postcss (for processing) and autoprefixer (adds vendor prefixes to your code):
npm install tailwindcss postcss@^8.1.0 postcss-cli autoprefixer - Create a tailwind config file (tailwind.config.js):
npx tailwind init - Create a postcss.config.js file, and copy the exports from below¹:
touch postcss.config.js - Create a the tailwind css file & directory, and copy the includes from below²:
mkdir css && touch css/tailwind.css - Add a build script to package.json:
"build": "postcss css/tailwind.css -o public/build/tailwind.css" - Build the files:
npm run build - Create your build/index.html file, and include the built css:
<link rel="stylesheet" href="build/tailwind.css"> - 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: npm install -g live-serverStart 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.
