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
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.