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
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
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
2. Publish the Config
Run the following command to publish the Tails config:
php artisan vendor:publish --tag=tails
3. Get Your API Key
Visit https://devdojo.com/tails/app and click the Developer API Key button from the menu.
When you click this button it will open up a modal window that looks like the following:
Simply, click the Generate My API Key button and you'll be presented with your new 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:
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 (2)
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.