An Eleventy plugin to make it easier to use Tailwind 4.0.x with Eleventy 3.0.x
This version uses PostCSS under the hood to process your templates. It is MUCH faster than version 1.x.x.
Install eleventy-plugin-tailwindcss-4 into your Eleventy project.
$ npm i eleventy-plugin-tailwindcss-4 In Tailwind 4 this file acts both as your source CSS file and the Tailwind Config file.
/* src/css/tailwind.css */
@import 'tailwindcss';Import the plugin in your configuration file eleventy.config.js.
import tailwindcss from 'eleventy-plugin-tailwindcss-4'const tailwindcss = require('eleventy-plugin-tailwindcss-4')input Is the only required option. It is your Tailwind source/config file and is relative to your Eleventy input folder.
All ther options are optional see below.
eleventyConfig.addPlugin(tailwindcss, {
input: 'css/tailwind.css' // required
} );Generate output CSS at _site/styles.css from your input at src/css/tailwind.css
import tailwindcss from 'eleventy-plugin-tailwindcss-4'
export default (eleventyConfig) => {
eleventyConfig.addPlugin(tailwindcss, {
input: 'css/tailwind.css'
} );
}Generate output CSS at _site/styles.css from your input at src/css/tailwind.css
import tailwindcss from 'eleventy-plugin-tailwindcss-4'
export default (eleventyConfig) => {
eleventyConfig.addPlugin(tailwindcss, {
input:'css/tailwind.css',
output: 'styles.css',
minify: false,
watchOutput: true,
domDiff: false,
debug: false
});
}Generate minified CSS output at _site/css/main.css
const tailwindcss = require('eleventy-plugin-tailwindcss-4')
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(tailwindcss, {
input: 'css/tailwind.css',
output: 'css/main.css',
minify: true
});
};By defaul the plugin writes out your CSS to _site/styles.css or whatever you have named your output folder. Ensure you have link to the generated style sheet in the <head> of your template.
<link rel="stylesheet" href="/styles.css">| Option | Required | Type | Default | Description |
|---|---|---|---|---|
| input | Yes | String | - | Tailwind source CSS/config relative to your Eleventy output folder. |
| output | Optional | String | 'styles.css' | Output filename relative to your Eleventy output folder. |
| minify | Optional | Boolean | false | Use cssnano to minify. |
| watchOutput | Optional | Boolean | true | Force a browser reload when output is written |
| domDiff | Optional | Boolean | false | Don't use Dev Server domDiffing as it causes unstyled flashes |
| debug | Optional | Boolean | false | Show plugin and Tailwind debug output. |
Example repo of the plugin installed, configured (ES6) and working.
There is an issue with the domDiffing of the Dev Server happening before the plugin can write the CSS to the output folder. This can cause an extra reload in the browser and in some circumstances a flash of incorrectly styled content. The plugin turns off domDiffing by default which stops this from happening.
You can overide this with domDiff: true in the options if you need to.
2.0.1 Fixes an issue where in some cases output CSS could be written before output folder was created. 2.0.0 Major rewrite to use PostCSS under the hood
@Hidden on the 11ty Discord