jamshop / eleventy-plugin-tailwind

Compile tailwind CSS in 11ty

Eleventy Plugin - Tailwind

Install:

npm install @jamshop/eleventy-plugin-tailwind autoprefixer postcss tailwindcss

Usage

In you main config .eleventy.js:

const pluginTailwind = require("@jamshop/eleventy-plugin-tailwind");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginTailwind, {
    entry: "src/tailwind.css",
    output: "_site/css/tailwind.css",
    inputDir: "site"
  });
  // and the rest of your config
};

This will compile src/tailwind.css to _site/css/tailwind.css.

In src/tailwind.css you can add Tailwind directives such as:

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

The inputDir option is required and should match your 11ty input directory. This is used to create a default Tailwind config that will correctly purge unused classnames from tailwindCSS.

The default config can be extended by the inclusion of a tailwind.config.js file in the root directoy of your project or by passing a tailwindConfig option to the plugin. These option will be merged with the default configuration.

Tailwind v2 will only purge when NODE_ENV is set to production: https://tailwindcss.com/docs/optimizing-for-production. This is not a requirement for V3.

eleventy-plugin-tailwind's Issues

tailwind bump?

Might we see a bump to Tailwind 3?

production is purging all

Hi,

That's a fantastic idea to put tailwind integration into a plugin, thank you so much !
I tried to use your plugin instead of building css through post-css-cli

It works locally for me, but when in production the purge doesn't include styles located in templates in my input directory (njk files). So in production, css is too much purged.

In the plugin config I set inputDir the same as the dir.input of eleventy (named src). Is it correct ?