Security News
Opengrep Adds Apex Support and New Rule Controls in Latest Updates
The latest Opengrep releases add Apex scanning, precision rule tuning, and performance gains for open source static code analysis.
By Sarah Gooding - Aug 12, 2025
eleventy-plugin-tailwindcss-4
Advanced tools
Eleventy Plugin TailwindCSS 4
An Eleventy plugin to make it easier to use Tailwind 4.0.x with Eleventy 3.0.x
Version 2.0
This version uses PostCSS under the hood to process your templates. It is MUCH faster than version 1.x.x.
Installation & configuration
Install eleventy-plugin-tailwindcss-4 into your Eleventy project.
$ npm -i eleventy-plugin-tailwindcss-4
Create a Tailwind source/config file
In Tailwind 4 this file acts both as your source CSS file and the Tailwind Config file.
/* src/css/tailwind.css */
@import 'tailwindcss';
Configure Eleventy
Import the plugin in your configuration file eleventy.config.js.
ES6
import tailwindcss from 'eleventy-plugin-tailwindcss-4'
CJS
const tailwindcss = require('eleventy-plugin-tailwindcss-4')
Add the plugin
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
} );
ES6 Basic example
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'
} );
}
ES6 all options at default settings example
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
});
}
CJS example
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
});
};
Link to the generated CSS
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">
Options
| 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
Example repo of the plugin installed, configured (ES6) and working.
Known Issues
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.
Versions
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
Thanks
@Hidden on the 11ty Discord
FAQs
An Eleventy plugin to process Tailwind CSS
The npm package eleventy-plugin-tailwindcss-4 receives a total of 92 weekly downloads. As such, eleventy-plugin-tailwindcss-4 popularity was classified as not popular.
We found that eleventy-plugin-tailwindcss-4 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 29 Apr 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
npm Adopts OIDC for Trusted Publishing in CI/CD Workflows
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
By Sarah Gooding - Aug 08, 2025
Research
/Security News
60 Malicious Ruby Gems Used in Targeted Credential Theft Campaign
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
By Kirill Boychenko - Aug 07, 2025