I’d like to try a starter project that uses 11ty, Tailwind and Alpine.
On this blog there’s a link to a starter project on Netlify:
Can someone please give instructions how to add Tailwind to the starter 11ty template? I found it very frustrating with the starter template suggesting to
but with no guidance.
For example in the instructions here:
tailwindcss /docs/installation
it says to add paths to all of your template files to:
tailwind.config.js
but I’m not sure if the template file paths are the same and do I need to put a . at the start of tailwind.config.js like .eleventy.js ?
Duly note that TailwindCSS is supposed to be installed as part of your build tools so it can generate a CSS file with only the stuff you use, so using that will slow stuff down. It will enable TailwindCSS classes in your app though
Hello,
These two commands do two seperate things. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
processes your css styles in src/input.css and outputs them in dist/output.css with all the tailwind stuff mixed in. The reason you do this for every change in your css file is because tailwind is a bit big to send to each of your users so it’s considered bandwidth saving to have a program look at your css for the parts of tailwind you actually use. While there may not be a lot in the file right now, it’s actually just telling the tailwindcss program that you want to use tailwind (yea it’s not implied by the name of the command I think).
npx @11ty/eleventy --serve
on the other hand handles all your other files. Eleventy is a static site generator so basically you define rules for generated webpages and this command reads in your rules and generates them based off your rules and template files. Eleventy doesn’t automatically deal with a css framework like tailwind so using the above command you’re sort of changing the css so eleventy can use it without modification. For alpine.js since it is just a js library you can include via a script tag you can also just put it in your eleventy template since it is simple enough. It’s true from the above that you can also include a css file of tailwind but that contains all of tailwind, so I’d go that route if you want something up quick and don’t care too much about the loading speed for some users on slow internet. If you do choose to use that you may omit the npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch command entirely.
Sorry, if this explanation is a bit confusing, if someone else can think of a better explanation I welcome you to jump in.
def need to write something explaining how tooling works with all this web stuff it can be kind of daunting…
