DEV Community

Cover image for Tails 🌪️ - Beautify open-source TailwindCSS Components
Bobby Iliev
Bobby Iliev

Posted on • Updated on

Tails 🌪️ - Beautify open-source TailwindCSS Components

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

This is the Tails composer package for Laravel. Easily fetch designs in your Laravel application that you design inside of the Tails Site/Page Builder.

Tails Laravel Package

Latest Version on Packagist Total Downloads

Tails Package Image

This package will allow you to easily fetch designs that you have created in the Tails page builder. Follow the steps below to learn how to install, configure, and use this package.

1. Install The Package

You can install the package via composer:

composer require devdojo/tails
Enter fullscreen mode Exit fullscreen mode

2. Publish the Config

Run the following command to publish the Tails config:

php artisan vendor:publish --tag=tails
Enter fullscreen mode Exit fullscreen mode

3. Get Your API Key

Visit and click the Developer API Key button from the menu.

Developer API Key Menu Item

When you click this button it will open up a modal window that looks like the following:

Generate New API Key

Simply, click the Generate My API Key button and you'll be presented with your new API Key.

Tails API Key

If you ever need to re-generate your key, you can click the Re-generate My API Key button and it will be refreshed.

5. Add API key to .env

You will need to add…

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

Make sure to also check the premium version of Tails here:

TailwindCSS Page Creator

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
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 ✨

Top comments (2)

bias profile image
Tobias Nickel

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?

jayswaan profile image

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.