DEV Community

loading...
Cover image for Tutorial Simple HTML website Tailwind Setup

Tutorial Simple HTML website Tailwind Setup

nicolasmlv profile image Nicolas Maloeuvre Originally published at nicomlv.com Updated on ・3 min read

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.

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
Enter fullscreen mode Exit fullscreen mode

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

purge: {
  mode: 'all',
  preserveHtmlElements: false,
  content: ['./public/**/*.html'],
},
Enter fullscreen mode Exit fullscreen mode

On package.json, remove the test script and set this:

"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"
}
Enter fullscreen mode Exit fullscreen mode

Create postcss.config.js:

const cssnano = require('cssnano');

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

Create Readme.md (and read it):

# 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.
Enter fullscreen mode Exit fullscreen mode

Create commit_and_push.sh or run it manually when needed if you prefer:

npm run buildcss:prod
git add . -A
git commit -am $1
git push
npm run buildcss:dev
Enter fullscreen mode Exit fullscreen mode

Create main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* add your custom CSS here if you need */
Enter fullscreen mode Exit fullscreen mode

Create public/index.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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

Forem Open with the Forem app