11ty Tailwind Jit

Overview:

The 11ty - Tailwind “JIT” (Just In Time) CSS starter is a tool that allows users to see their changes take effect in real-time while typing into their templates. This makes it easier for users who are new to Tailwind to visualize the changes they are making. The starter was modeled after code by Darrik Moberg and adapted to work with Tailwind JIT. It also includes troubleshooting help by Mike Allanson.

Features:

• Real-time changes: Users can see their changes take effect immediately as they type into their templates.
• Easy customization: Users can adjust the configuration file to add templates they want to “watch” for changes.
• Quick build process: Tailwind JIT builds quickly, taking less time than legacy Tailwind.
• Environment variable sensitivity: Tailwind is sensitive to the value of the NODE_ENV environment variable and can be adjusted accordingly.

Installation:

To install the 11ty - Tailwind “JIT” CSS starter, you will need to follow these steps:

1. Download the following files from the repository:

• /src/_data/tailwindcss.js
• The 2 files under /src/tailwind (Note: You may need to modify the configuration file to suit your needs)
• /src/postcss.config.js/utils/postcss.js

2. Add the necessary dependencies to your package.json file.

3. Modify your .eleventy.js config file to include the necessary additions.

4. Once everything is set up, you can start using the starter in your projects.

Summary:

The 11ty - Tailwind “JIT” CSS starter is a convenient tool for those who want to use Tailwind CSS in their Eleventy projects. It allows users to see their changes in real-time as they type, making it easier to experiment with different Tailwind classes. The starter provides easy installation instructions and includes troubleshooting information for known issues. Overall, it is a helpful resource for developers looking to incorporate Tailwind CSS into their workflow.