membuat web statis dg nodejs + tailwind

Creating a static website with Node.js and Tailwind CSS involves several steps. Below is a step-by-step guide to help you set up your project.

Step 1: Set Up Your Project

Install Node.js: Make sure you have Node.js and npm (Node Package Manager) installed. You can download and install Node.js from nodejs.org.
Initialize Your Project: Open your terminal and run the following commands to create a new directory and initialize a Node.js project.
```
mkdir my-static-site
cd my-static-site
npm init -y
```

Step 2: Install Tailwind CSS

Install Tailwind CSS: Run the following command to install Tailwind CSS and its dependencies.
```
npm install tailwindcss postcss autoprefixer
```
Generate Tailwind Configuration Files: Run the following command to generate the Tailwind and PostCSS configuration files.
```
npx tailwindcss init -p
```
This will create tailwind.config.js and postcss.config.js files.

Step 3: Configure Tailwind CSS

Update Tailwind Configuration: Open tailwind.config.js and configure the content array to include your HTML files.

module.exports = {
  content: ['./public/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create Your CSS File: Create a CSS file in a new src directory.
```
mkdir src
touch src/styles.css
```
Add the following lines to src/styles.css to include Tailwind's base, components, and utilities.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Step 4: Build Your HTML Files

Create HTML Files: Create a public directory and add your HTML files.

mkdir public
touch public/index.html

Add the basic HTML structure and include the compiled CSS in public/index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Static Site</title>
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello, Tailwind!
  </h1>
</body>
</html>

Step 5: Build Your CSS

Update Package.json Scripts: Update the scripts section in your package.json to build your CSS.

"scripts": {
  "build:css": "tailwindcss -i ./src/styles.css -o ./public/dist/styles.css --minify",
  "watch:css": "tailwindcss -i ./src/styles.css -o ./public/dist/styles.css --watch"
}

Build Your CSS: Run the following command to build your CSS.
```
npm run build:css
```

Step 6: Serve Your Static Site

Install a Static File Server: You can use a simple static file server to serve your static site. One popular option is http-server.
```
npm install -g http-server
```
Serve Your Site: Run the following command to serve your static site.
```
http-server ./public
```
Your site should now be accessible at http://localhost:8080.

Step 7: Develop and Watch for Changes

Watch for CSS Changes: Run the following command to watch for changes to your CSS and automatically rebuild.
```
npm run watch:css
```
Edit and Refresh: Edit your HTML and CSS files as needed. The static file server will automatically serve the updated files, and the watch command will rebuild your CSS whenever you make changes.

By following these steps, you can set up a static website with Node.js and Tailwind CSS. Tailwind's utility-first approach allows for rapid styling, and Node.js provides a convenient way to manage dependencies and scripts for your project.

rwaddin/static-web.md