An Eleventy Starter with Tailwind CSS and Alpine.js

This article details a streamlined approach to building a personal website using Eleventy, Tailwind CSS, and Alpine.js, emphasizing simplicity and minimal design. Instead of using existing, potentially complex starters, this guide walks you through a straightforward setup.

Prerequisites: Familiarity with Tailwind CSS, HTML, JavaScript, Nunjucks templating engine, the command line, and npm is assumed.

Step 1: Project Setup

Create a new project directory, navigate to it in your terminal, and initialize a package.json file:

npm init -y

Install Eleventy and Tailwind CSS:

npm install -D @11ty/eleventy tailwindcss@latest

Step 2: Creating a Test Page

Create index.njk (the homepage) and _includes/default.njk (the base template). index.njk will extend default.njk:

<!-- index.njk -->
{% extends "_includes/default.njk" %}

{% block title %}It Works{% endblock %}

{% block content %}
  <div>
    <div>
      Good design<br><br>
      is<br><br>
      as little design<br><br>
      as possible
    </div>
  </div>
{% endblock %}

<!-- _includes/default.njk -->



  <title>{% block title %}Does it work?{% endblock %}</title>
  <meta charset="UTF-8">
  {% if description %}
    <meta content="{{description}}" name="description">
  {% endif %}
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" name="viewport">
  <link href="/style.css?v=%7B%%20version%20%%7D" rel="stylesheet">
  {% block head %}{% endblock %}


  {% block content %}
    {{ content | safe }}
  {% endblock %}

Step 3: Tailwind CSS Configuration

Create styles/tailwind.config.js and styles/tailwind.css:

// styles/tailwind.config.js
module.exports = {
  content: ['_site/**/*.html'],
  safelist: [],
  theme: {
    extend: {
      colors: {
        change: 'transparent',
      },
    },
  },
  plugins: [],
}

// styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .change {
    color: transparent;
  }
}

Step 4: Project Configuration and Build

Create .gitignore to exclude unnecessary files:

<code>_site/
.DS_Store
node_modules/</code>

Create .eleventy.js to configure Eleventy:

const htmlmin = require('html-minifier');
const now = String(Date.now());

module.exports = function(eleventyConfig) {
  eleventyConfig.addWatchTarget('./styles/tailwind.config.js');
  eleventyConfig.addWatchTarget('./styles/tailwind.css');
  eleventyConfig.addPassthroughCopy({ './_tmp/style.css': './style.css' });
  eleventyConfig.addShortcode('version', function() { return now; });

  eleventyConfig.addTransform('htmlmin', function(content, outputPath) {
    if (process.env.ELEVENTY_PRODUCTION && outputPath && outputPath.endsWith('.html')) {
      return htmlmin.minify(content, { useShortDoctype: true, removeComments: true, collapseWhitespace: true });
    }
    return content;
  });
};

Update package.json with build scripts:

{
  "scripts": {
    "start": "eleventy --serve & npx tailwindcss -i styles/tailwind.css -c styles/tailwind.config.js -o _site/style.css --watch",
    "build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i styles/tailwind.css -c styles/tailwind.config.js -o _site/style.css --minify"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.0",
    "tailwindcss": "^3.0.0",
    "html-minifier": "^4.0.0"
  }
}

Run npm install and then npm start to start the development server. Test Tailwind's reactivity by modifying tailwind.config.js and tailwind.css. Run npm run build for a production build.

Step 5: Integrating Alpine.js

Install Alpine.js:

npm install -D alpinejs

Update .eleventy.js to copy Alpine.js:

// ... (previous .eleventy.js content) ...
eleventyConfig.addPassthroughCopy({ './node_modules/alpinejs/dist/cdn.js': './js/alpine.js' });
// ... (rest of .eleventy.js content) ...

Add Alpine.js to _includes/default.njk before the closing

The above is the detailed content of An Eleventy Starter with Tailwind CSS and Alpine.js. For more information, please follow other related articles on the PHP Chinese website!