Overview
The Eleventy Plugin for Tailwind CSS was created to seamlessly integrate TailwindCSS with the Eleventy static site generator, simplifying the development process. Initially developed during a time when Eleventy’s API lacked the eleventy.before and eleventy.after events, the plugin facilitated the automatic compilation of TailwindCSS whenever Eleventy rebuilt the site. However, with the arrival of Eleventy v1.0.0 and TailwindCSS v2.1, which introduced the efficient Just-in-Time (JIT) mode, this plugin has become somewhat obsolete and is now less recommended for new projects.
Despite its obsolescence, this plugin contained useful features that helped developers merge TailwindCSS functionalities with Eleventy’s structure. Those currently using an older version of Eleventy may still find value in its capabilities, enhancing their workflow while working with TailwindCSS.
Features
- Easy Installation: Available on npm, making it simple to add to your existing Eleventy project with just a few lines of code in your configuration file.
- Flexible Options: Customize processing by specifying input directories and destination paths for CSS files, allowing for tailored integration depending on project structure.
- Watch Feature: With an optional flag, CSS can be rebuilt not only when source files change, but also when template files are updated, ensuring that Tailwind’s purge feature can be utilized during development.
- Folder Structure Preservation: Maintain the original folder structure of input files in the output directory, enhancing organization in your project’s asset management.
- Autoprefixer Support: Automatically add necessary vendor prefixes to your generated CSS for improved browser compatibility, thanks to built-in support for Autoprefixer.
- Custom Configuration Path: Specify a custom path to your Tailwind configuration file, if needed, enabling more complex setups without hassle.
- Glob Patterns: Use fast-glob to define file paths for processing CSS, ensuring compatibility with various project layouts while excluding non-CSS files.
- Development Flexibility: Options to manage the build process simplify CSS enhancements while ensuring smooth integration with Eleventy’s templating system.
