The easiest Eleventy Tailwind CSS Setup

How Tailwind CSS is used on this site

  • Back
    1. Initialize Tailwind CSS by following their documentation
    2. Follow Vadim Makeev's article to set up PostCSS in Eleventy
    3. Use Tailwind CSS as plugin in the PostCSS setup instead

    For reference, check out the commit where I implemented it and possibly the future commits.

    Downsides

    There is no hot reload or at least I haven't figured out a good hot reload experience for smoother development process.

    Looking forward to Lightning CSS

    At the point of writing Tailwind CSS 4 is already in the works and they seem to switch to Lightning CSS. Vadim Makeev's page mentioned above seems to use it too by looking at their Eleventy Setup on GitHub. So in the future it might be reasonable to use Tailwind CSS in Eleventy with Lightning CSS.