This article presents an open-source and free starter built with Tailwind CSS Starter Kit and Eleventy SSG. The project, released under the MIT license on Github, scores 99 on Lighthouse and provides a simple set of pages and tools to help any programmer to start fast a simple Tailwind project and see something on the screen in less than 2 minutes.
Thanks for reading and let me know your thoughts in the comments.
Tailwind Starter - credits and links
- Tailwind Starter LIVE Demo
- Tailwind Starter Sources - published on Github
- UI KIT: Tailwind Starter Kit - provided by Creative Tim
For newcomers, Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This CSS framework is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
This beautiful freebie crafted by Creative-Tim does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue, and Angular.
Note: The Tailwind Starter Kit is now listed on Product Hunt. Those that find the kit useful, feel free to join the Product Hunt discussion and talk directly with the makers.
To compile the code, we need a Nodejs environment properly set up in the workstation. To start the app, we need to type only a few lines in the terminal:
$ # Clone the sources $ git clone https://github.com/app-generator/eleventy-tailwind-starter.git $ cd eleventy-tailwind-starter $ $ # Install the dependencies $ yarn $ $ # Star in development mode $ yarn start # with LIVE reload $ $ # app is running on http://localhost:8181 $ $ # Production build $ yarn build # $ # HTML files are generated in dist folder