Tailwind CSS makes it very quick to style web pages. However, the most common complaints devs have with Tailwind CSS is that:
1. It’s hard to look at the huge list of class names in the markup. Especially for simple websites, if we don’t use any frameworks, there’s no way to create components. So, all the markup ends up in a single file and this definitely looks messy!
2. Without using components, code is repeated - which means - repeating all the utility classes making it less maintainable.Now these are the two problems that can be solved using the static site generator - Eleventy along with a templating engine called Nunjucks.
0:00 Introduction
2:52 Install Eleventy
3:45 Hello World in Eleventy
6:27 Styling in Eleventy using regular CSS
7:38 Eleventy Configuration File
9:24 Install Tailwind CSS in Eleventy
10:58 Tailwind CSS Config for Eleventy
12:21 Build Tailwind CSS in Eleventy
14:46 Start Project - Two-page Static Website
15:18 Create layouts in Eleventy
18:52 Create and reuse partials like header and footer
19:42 Include files in Eleventy
27:28 Include sections from different files
33:20 Macros in Eleventy for components
40:11 Adding another page in Eleventy
41:42 Highlighting current page menu item using if statements
45:04 Quick summary
Part 2 - Deploy to Netlify
[ Ссылка ]
Github Repository: [ Ссылка ]
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: [ Ссылка ]
Follow Thirus on Twitter: [ Ссылка ]
Visit my website: [ Ссылка ]
#tailwind #tailwindcss #eleventy
