With Hacktoberfest just around the corner, here is a nice open-source TailwindCSS project which you might want to contribute to! ❤️
Tails is a (no-config) copy'n paste library of templates and components hand-crafted using TailwindCSS.
Feel free to contribute on GitHub 💚
thedevdojo
/
tails-components
The Tails Open Source Components are a (no-config) copy'n paste free collection of hand-crafted templates and components built in TailwindCSS.
💜 Tails - Open Source Components
The Tails Open Source Components are a (no-config) copy'n paste free collection of hand-crafted templates and components built in TailwindCSS.
💻 Tails - TailwindCSS Page Creator
Tails is the ultimate drag'n drop page creator built for TailwindCSS. Tails comes with over 190+ hand-crafted premium components to help you look pretty for your customers.
🔗 Links
- TailwindCSS Drag'n Drop page creator
- TailwindCSS Components
- TailwindCSS Playground
- TailwindCSS Templates
⚡ Usage
It's pretty simple to use any of these components or templates in your project. Any component you wish to use can be copied and pasted into your own project. Visit the Components page to view the components and view the source code. Additionally, you can view the Templates and simply copy and paste these templates into your own project.
🤲 Contributing
🍿 Watch the quick 5 minute video below where you'll learn how to…
NOTE: All Tails components are free, and always will be!
Make sure to also check the premium version of Tails here:
And check out the promo video here:
Usage 🔥
It's pretty simple to use any of these components or templates in your project. Any component you wish to use can be copied and pasted into your own project. Visit the Components page to view the components and view the source code. Additionally, you can view the Templates and simply copy and paste these templates into your own project.
Features ✨
❤️ Responsive: Crafted with minimalistic UI design
❤️ Live preview
❤️ Tailwind CSS PlayGround
Built with 🔧
- HTML - For the web framework
- Tailwind CSS - For styling components
- Alpine JS - To add to the JavaScript magic
Contributing ❤️
If you are contributing, please read the contributing file before submitting your pull requests.
Demo 🚀
If you want a heads up on my next projects, or just want to chat about the web, make sure to follow me @bobbyiliev_ 💙.
Happy Coding ❤︎
For more information about DevDojo and Hacktoberfest make sure to visit this page here.
Any feedback is appreciated ✨
Top comments (3)
Very nice list of components - lots of options for a variety of use cases.
However, it is hard to navigate through the components. Not sure if I've missed it, but I have to scroll through them and keep clicking load more. If there was a search or a menu, would be good.
i got a feeling here, and I got that before with bootstrap and tailwind seems similar to me.
both, define lots of classes and on a single object prople add lots of then. Why is it, that adding 5 classes of tailwind is preferred over adding a style attribute?
Tailwind and Bootstrap have almost nothing in common. Perhaps give Tailwind a try on a small project and see how you feel afterwards. I'd recommend using it with a component based framework like Vue/Svelte/React.
As far as why classes are preferred over using a style attribute... reusability, speed, and developer experience come to mind. If you have a primary color in your application and you want 10 components to use it as text and background color with inline styles you either set up a CSS Var and reference all over the place like
color: var(--primaryColor)andbackground-color: var(--primaryColor)or with Tailwind it would simply be a few classestext-primaryandbg-primaryyou put anywhere.Additionally there are Tailwind plugins for VS Code that give you autocompletion and let you peek at your full list of utilities and what styles they apply. When combined with a component based framework you're usually writing the styles one time for each type of component in your app and then putting it anywhere. It prevents duplication, keeps you in the HTML and feels more like you're describing the components than writing the style for them.
Tailwind also gives some sweet group hover, group focus features and utilities for interaction that would be impossible with inline styles.
Last point: Tailwind runs with Post CSS and if you set it up properly you get access to a bunch of CSS tools like nano, autoprefix, CSS next etc... this helps you get small outputs, uniform spacing, good looking customizable layouts, future features and cross-browser compatibility with little effort after the initial setup.