How To Use Tailwind CSS with Eleventy

Derrick Reimer — Tue, 11 Feb 2020 14:53:22 +0000

In this guide, we'll walk through how to install Tailwind CSS in an Eleventy project.

Set up Webpack

This guide assumes you have Webpack installed in your Eleventy project. If you haven't already, follow this guide to prepare your project for Tailwind:

How To Use Webpack in an Eleventy Project →

Install dependencies

Run the following command to install Tailwind and a few other dependencies for Webpack:

npm install --save-dev tailwindcss autoprefixer mini-css-extract-plugin css-loader postcss-loader

Configure the build pipeline

Open up your webpack.config.js file and add the MiniCssExtractPlugin and the CSS rule:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      }
    ]
  }
}

Then, create a postcss.config.js file:

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

Add Tailwind to your CSS

Create a main.css file in the src/styles directory and add the Tailwind directives:

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

Then, import your CSS file in your src/scripts/index.js file:

import '../styles/main.css';

Congratulations! Tailwind CSS is now installed in your project.

Customize Tailwind (Optional)

At this point, you’re all set up to work with Tailwind’s excellent defaults.

If you need to customize your configuration, run the following command to generate a minimal tailwind.config.js file:

npx tailwindcss init

Originally published in the StaticKit guides

How To Use Webpack in an Eleventy Project

Derrick Reimer — Mon, 10 Feb 2020 16:22:25 +0000

Eleventy is a simple, blazing fast static site generator created by Zach Leatherman. Think of it as the modern successor to Jekyll.
In this guide, we'll walk through how to use Webpack in an Eleventy project.

Create an Eleventy project

Run the following commands to scaffold a new Eleventy project:

mkdir my-eleventy-project
cd my-eleventy-project
npm init -y
npm install --save-dev @11ty/eleventy

Then, add some directories to ignore in Git:

echo "node_modules" >> .gitignore
echo "_site" >> .gitignore # the build directory

Configure Eleventy

Create a .eleventy.js file with the following contents. This tells Eleventy to look for files in the src directory to build and to place them in the _site directory.

module.exports = function(eleventyConfig) {
  return {
    dir: { input: 'src', output: '_site' }
  };
};

Install Webpack

Run the following command to install Webpack and a few helper libraries:

npm install --save-dev webpack webpack-cli npm-run-all rimraf

Next, create a minimal webpack.config.js file in the root of your project:

const path = require('path');

module.exports = {
  entry: './src/scripts/main.js',
  output: {
    path: path.resolve(__dirname, '_site/assets'),
    filename: 'main.js'
  }
};

This configuration tells Webpack to look for a main.js file in the src/scripts directory and to output it into the _site/assets directory.

Then, add the following scripts to your package.json file:

{
  "scripts": {
    "clean": "rimraf _site",
    "serve:webpack": "webpack --mode development --watch",
    "serve:eleventy": "ELEVENTY_ENV=development eleventy --serve",
    "serve": "npm-run-all clean --parallel serve:*",
    "build:webpack": "webpack --mode production",
    "build:eleventy": "ELEVENTY_ENV=production eleventy",
    "build": "npm-run-all clean --parallel build:*"
  }
}

Here's what these scripts do:

The serve script is what you'll use in development mode to preview your site.
The build script is for generating production builds.
The clean script deletes the _site folder to ensure old files don't make it into a new build.

Create a JavaScript file

Create a src/scripts/main.js file with the following contents:

alert('It works!');

Create a page

First, create a layout file called src/_includes/layouts/base.njk that references your main.js script:

<!doctype html>
<html lang="en">
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
    <script src="/assets/main.js"></script>
  </body>
</html>

Then, create a src/index.md file that uses your base layout:

---
title: "Home"
layout: layouts/base.njk
---

# Hello world

Finally, spin up your local dev server:

npm run serve

Open localhost:8080 and you should see an alert from your JavaScript bundle! Congratulations, Webpack is now integrated into your site build process 🎉

Check out the source on GitHub →

Originally posted in the StaticKit guides

DEV Community: Derrick Reimer