Hello Coders,
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.
Thank you! Content provided by App Generator.
- Tailwind Starter - LIVE Demo
- UI KIT: Tailwind Starter Kit - provided by Creative Tim
- FlowBite Tailwind components - free UI Kit
Tailwind CSS
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.
Tailwind CSS Starter Kit
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.
How to build the starter
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
Starter Screens
Landing page
Profile Page
Registration Page
Thank you!
Top comments (0)