Building a simple one column blog using Tailwind CSS part 1 - Setup and basic page structure

Tailwind CSS is a utility-first CSS framework that allows you to quickly compose designs in your markup.

It integrates nicely into a PostCSS workflow. If PostCSS is new to you, don’t worry, by the end of this guide, you’ll have some practical experience in using both Tailwind and PostCSS to develop a simple one column blog layout.

Instead of spending time explaining the concepts, this post will focus on the practical application first.

I’ll assume you have Node.js 12.13 or higher installed and are familiar enough with the command line to navigate around, create directories and run basic commands.

Project setup

First create a directory for your theme. I’ve called mine one_column, but you can choose any name you like.

mkdir one_column
cd one_column

Initialise a new project with npm

npm init -y

This will place a package.json file in your new directory.

The simplest method of getting started with Tailwind is to use taildwind-cli to generate a default set of styles. First install tailwind-cli

npm install -D tailwindcss-cli

If you open package.json now, you’ll notice a devDependency section with tailwindcss-cli installed. My version as of writing is 0.1.2

  "devDependencies": {
    "tailwindcss-cli": "^0.1.2"
  }

Generate the default css

Now we can use tailwindcss-cli to generate a css file for us with all the default Tailwind css.

npx tailwindcss-cli build -o css/tailwind.css

You should now have a new directory called css with a single file in it tailwind.css. Your directory structure at this point should be

one_column
├── css
│   └── tailwind.css
│── node_modules
│── package-lock.json
│── package.json

Add a basic HTML page

We need an HTML page to work with - create a new file called index.html and add the following

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/tailwind.css" rel="stylesheet">
  <title>One colum blog</title>
</head>
<body>
  <h1>One Column Blog</h1>
</body>
</html>

Open your new index.html in a browser. You’ll see something similar to the following image

Simple webpage with a singe header saying One column blog

If you are familiar with other css frameworks, Tailwind’s default styling might seem odd. You’ll notice, for example, the h1 element is unstyled. This is a result of Tailwind’s preflight base styling. You might find it peculiar at to work with at first, but by resetting the styles for some key elements, Tailwind forces you to consider your type and spacing scale and helps protect you from some unexpected alignment issues.

Summary

In this post, we created a directory and initialised a new npm project.. Then we installed the Tailwind command line interface and used it to generate a default css file. Finally, we created a basic HTML file with a single header tag. We learnt that Tailwind includes a set of preflight styling that resets, among other things, all header tags.

Next →