Awesome

I initially created this plugin to simplify using TailwindCSS alongside Eleventy. At that time, there were no eleventy.before and eleventy.after events in Eleventy's official API yet, so we had to monkeypatch the Eleventy code so that the TailwindCSS compiler automatically runs whenever Eleventy tries to rebuild the site. This technique is definitely a bad idea because of these reasons (too lazy to explain it here lol). Now, with the release of Eleventy v1.0.0 and also TailwindCSS v2.1 which includes the new Just-in-Time (JIT) mode that makes things much faster and more efficient, this plugin is effectively obsolete and I'm no longer recommending anyone to use it. You can find tons of tutorials on the internet showing how to integrate TailwindCSS with Eleventy like this one or check out my starter project here for reference.

Eleventy Plugin Tailwind CSS

An Eleventy plugin to add Tailwind CSS support for your website.

Installation

Available on npm.

npm install --save eleventy-plugin-tailwindcss

Usage

Open up your Eleventy config file (probably .eleventy.js) and add the plugin like so:

const pluginTailwindCSS = require("eleventy-plugin-tailwindcss");
module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(pluginTailwindCSS);
};

You can also pass in options. For example, this will process the CSS file from src/css/main.css to _site/assets/main.css:

// Input directory: src
// Output directory: _site
eleventyConfig.addPlugin(pluginTailwindCSS, {
    src: "src/css/main.css",
    dest: "assets",
    keepFolderStructure: false,
    minify: false
    // See below for other available options
});

Options

src

• Type: string | string[]
• Default: your input dir + "**/*.css"

Paths (or glob patterns) to CSS files you want to process with Tailwind CSS, relative to the root of your project. To avoid any errors, we automatically exclude all files except those ending in .css.

:book: We use fast-glob as our low-level library for glob matching.

dest

New in v0.2.0

• Type: string
• Default: .

Where processed CSS files should be placed in the output folder.

Take a look at second example above, if you delete dest option, so that it returns to the default value (. which means right below the output folder), then the file will be placed at _site/main.css (Assuming your Eleventy output folder is _site).

configFile

• Type: string
• Default: tailwind.config.js

Path to tailwind configuration file (if exists), relative to the root of your project.

watchEleventyWatchTargets

New in v0.2.5

• Type: boolean
• Default: false

In watch/serve mode with this option set to false (default), CSS will only rebuild when files in src option changes. However, if set to true, CSS will also rebuild when the files Eleventy watches changes, that includes your template files like .html, .njk, .md, etc. Useful when you want to use Tailwind's purge feature during development.

keepFolderStructure

New in v0.2.0

• Type: boolean
• Default: true

Indicates whether the input file folder structure will be preserved in the output.

Back to the second example again, if you set keepFolderStructure option to true, then the file will be placed at _site/assets/css/main.css (Assuming your Eleventy output folder is _site).

autoprefixer

• Type: boolean
• Default: true

Indicates whether an output file should be added browser specific prefixes (like -webkit or -moz) if needed using Autoprefixer.

autoprefixerOptions

• Type: object
• Default: {}

Options to pass to Autoprefixer. See available options here.

minify

• Type: boolean
• Default: true

Indicates whether an output file should be minified using cleanCSS.

minifyOptions

• Type: object
• Default: {}

Options to pass to cleanCSS. See available options here.

License

MIT © Dafiul Haq