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
Edit the "purge" config in tailwind.config.js:
purge: {
mode: 'all',
preserveHtmlElements: false,
content: ['./public/**/*.html'],
},
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"
}
Create postcss.config.js:
const cssnano = require('cssnano');
module.exports = {
plugins: [
require('tailwindcss'),
cssnano({
preset: 'default',
}),
require('autoprefixer'),
],
};
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.
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
Create main.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* add your custom CSS here if you need */
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>
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
Top comments (0)