Tutorial Simple HTML website Tailwind Setup
Tags: dohackaton, tailwindcss, npm, beginners
Published: 2021-01-03 04:02:50

---
title: Tutorial Simple HTML website Tailwind Setup
published: true
description: Create and deploy a HTML website Tailwind CSS v2, using npm, postcss on your custom domain with Netlify (or with render.com or other static hosting service)
tags: dohackaton, tailwindcss, npm, beginners
cover_image: https://www.nicomlv.com/blog/tutorial-simple-html-tailwind-setup/index.jpg
canonical_url: https://www.nicomlv.com/blog/tutorial-simple-html-tailwind-setup
series: ["A static Blog and Portfolio website with Tailwind"]
---

{% youtube 6BViyXWxARg %}

I wanted to create a simple static website with Tailwind, but unfortunately I am not a frontend programmer, I could not understand the official Tailwind Documentation on how to get started, so here is the tutorial that would have helped me be operational in minutes.

```bash
mkdir my-static-website && cd my-static-website
# by default, npm think you will publish your project as a npm package and so it asks for your name, your email etc, weird, ignore this with “-y” 
npm init -y
npm install autoprefixer cssnano onchange postcss postcss-cli tailwindcss cross-env live-server
# it will install 1000 packages, the mythical frontend bloat was not a myth after all, keep them for you :
touch .gitignore && echo "node_modules/" >> .gitignore
# generate your tailwind.config.js file, (npx is a cli tool for npm packages)
npx tailwindcss init
```

Edit the "purge" config in **tailwind.config.js**:

```Javascript
purge: {
  mode: 'all',
  preserveHtmlElements: false,
  content: ['./public/**/*.html'],
},
```

On **package.json**, remove the test script and set this:
```JSON
"scripts": {
  "buildcss:dev": "tailwindcss build ./main.css -o public/styles.css",
  "buildcss:prod": "cross-env NODE_ENV=production postcss build ./main.css -o ./public/styles.css",
  "onchange": "onchange 'tailwind.config.js' 'main.css' -- npm run buildcss:dev",
  "serve": "live-server public"
}
```

Create **postcss.config.js**:

```Javascript
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    require('tailwindcss'),
    cssnano({
      preset: 'default',
    }),
    require('autoprefixer'),
  ],
};
```

Create **Readme.md** (and read it):
```Markdown
# My static website

## Run in dev mode

In dev mode you need the full heavy tailwind.css because when you add Tailwind classes in your HTML, it will works directly, in some milliseconds. Be sure to run : `npm run buildcss:dev` if you use `commit_and_push.sh` you don't need it.

When you need to edit your tailwind.config.js (like testing colors) or your custom CSS (`main.css`), you can run `npm run onchange` on one tab, to see those edits live. You don't need it if you only edit your HTML with Tailwind classes.

## Run in production

Compile and commit a light tailwind.css file with `npm run buildcss:prod`. If you use `./commit_and_push.sh "commit message"`, you don't need to run it.
```

Create **commit_and_push.sh** or run it manually when needed if you prefer:
```bash
npm run buildcss:prod
git add . -A
git commit -am $1
git push
npm run buildcss:dev
```

Create **main.css**:
```CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

/* add your custom CSS here if you need */
```

Create **public/index.html**:
```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My static page</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <p>Content</p>
  </body>
</html>
```

Now you are ready. Generate for the first time the heavy Tailwind with **npm run buildcss:dev**. Accordingly to your Readme, run **npm run onchange** and **npm run serve** in your terminal, add some Tailwind classes, edit your tailwind.config.js, add new HTML pages, it's working.

## Ship it

You don't want to use the full tailwind css (4Mb) on production, **buildcss:prod** generates a light one. When you edit your HTML though, you prefer to use **buildcss:dev** because it is faster.

* Create a Github repository
* Create a render.com account (or Netlify, or similar), "New" / "Static site", and link your repository. Edit "Public directory" to : "./public".
* Commit a new edit in order to trigger the build, it works.
* Add your domain, add the A and CNAME entry, wait 5 minutes and it is live on your domain 👍

If you have any question or suggestion, please comment