Introduction

11ty-tailwind-jit is a starter project that combines Eleventy (11ty) static site generator with Tailwind CSS using the Just-In-Time (JIT) compiler. This setup allows for an incredibly fast development experience, enabling real-time CSS updates as you type changes into your templates. It's particularly useful for developers new to Tailwind CSS who want to experiment with different utility classes and see immediate results.

Main Features

1. Real-time CSS updates using Tailwind JIT compiler
2. Fast development experience with instant feedback
3. Easy integration with Eleventy (11ty) static site generator
4. Simplified Tailwind configuration
5. Live example hosted on Netlify
6. Customizable Tailwind theme
7. Environment-aware build process
8. Watchable CSS file for Eleventy
9. Version shortcode for browser CSS refresh

Installation Steps

1. Clone the repository:

   git clone https://github.com/kkgthb/11ty-tailwind-jit.git
   

2. Navigate to the project directory:

   cd 11ty-tailwind-jit
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run start
   

Usage Instructions

1. Edit Tailwind classes in your Eleventy templates (e.g., in the src directory).

2. Observe real-time updates in your browser as you make changes.

3. Customize the Tailwind configuration in /src/tailwind/tailwind.config.js if needed.

4. Add new templates and pages using Eleventy's file structure.

5. Use the {% version %} shortcode in your templates to ensure browser CSS refreshes.

6. For production builds, set the NODE_ENV environment variable to production.

7. Deploy your site to a platform like Netlify for easy hosting and continuous deployment.

Important Notes

1. If changes stop taking effect during development, restart the server once or twice.

2. Ensure the NODE_ENV environment variable is set to either production or development for proper functionality.

3. The project uses a custom PostCSS configuration for integrating Tailwind with Eleventy.

4. The .eleventy.js file includes important configurations for watching Tailwind CSS changes.

5. This starter can be adapted to other projects by copying specific files and dependencies.

6. The live example is hosted on Netlify and can be accessed for reference.

7. The project is open-source and welcomes contributions and improvements.

8. For larger projects, you may need to adjust the Tailwind configuration to watch additional template file types.

9. The starter is designed to be lightweight and can be easily customized for specific needs.

10. While primarily focused on 11ty and Tailwind, the concepts can be applied to other static site generators with some modifications.