loading...
Cover image for Tails 🌪️ - Beautify open-source TailwindCSS Components

Tails 🌪️ - Beautify open-source TailwindCSS Components

bobbyiliev profile image Bobby Iliev ・2 min read

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 💚

GitHub logo thedevdojo / tails

Tails is a (no-config) copy'n paste library of templates and components crafted using TailwindCSS

💡 Introduction

Tails is a (no-config) copy'n paste library of hand-crafted templates and components built in TailwindCSS.

🔗 Links

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 add a component to this repo.

If you are contributing, please read the contributing file before submitting your pull requests.




NOTE: All Tails components are free, and always will be!

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
TailwindCSS Open Soruce templates and components

❤️ Live preview

Tailwind CSS live preview and PlayGround

❤️ Tailwind CSS PlayGround

TailwindCSS online playground free editor

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 🚀

Tailwind CSS Playground

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 ✨

Posted on by:

bobbyiliev profile

Bobby Iliev

@bobbyiliev

I am a professional System Administrator with a demonstrated history of working in the internet industry. I am an avid Linux lover and supporter of the open-source movement philosophy.

Discussion

pic
Editor guide
 

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) and background-color: var(--primaryColor) or with Tailwind it would simply be a few classes text-primary and bg-primary you 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.