Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/afc-org/js-tailwind
This is a complementary JS code for the tailwindcss project.
https://github.com/afc-org/js-tailwind
javascript javascript-plugin javascript-tailwind javascript-tailwindcss tailwind tailwind-css tailwindcss tailwindcss-extension tailwindcss-plugin tailwindjs
Last synced: 3 months ago
JSON representation
This is a complementary JS code for the tailwindcss project.
- Host: GitHub
- URL: https://github.com/afc-org/js-tailwind
- Owner: afc-org
- License: mit
- Created: 2020-03-27T10:55:43.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-23T08:38:53.000Z (about 4 years ago)
- Last Synced: 2024-09-29T10:46:37.857Z (3 months ago)
- Topics: javascript, javascript-plugin, javascript-tailwind, javascript-tailwindcss, tailwind, tailwind-css, tailwindcss, tailwindcss-extension, tailwindcss-plugin, tailwindjs
- Homepage:
- Size: 531 KB
- Stars: 21
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @afc-org/js-tailwind
   
### A dynamic plugin extension for TailwindCSS.
**@afc-org/js-tailwind** is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS, It comes with code written with javascript as an extension to TailwindCSS for you to have dynamic components inside your app as well.
It comes with 8 dynamic components, that any website needs.
We plan on implementing more, in the weeks to come.
## Table of Contents
* [Versions](#versions)
* [Components](#components)
* [Quick Start](#quick-start)
* [Documentation](#documentation)
* [Dependencies](#dependencies)
* [Browser Support](#browser-support)
* [Reporting Issues](#reporting-issues)
* [Licensing](#licensing)
* [Resources](#resources)
## Versions
|Angular|JavaScript|React|Svelte|VueJS|
| --- | --- | --- | --- | --- |
|  |  |  |  | |
## Quick Start
Add the following CDN to your project:
```
```
## Components
- [Alert](#alert)
- [Dropdown](#dropdown)
- [Menu Collpase](#menu-collapse)
- [Modal](#modal)
- [Navbar Collpase](#navbar-collapse)
- [Popover](#popover)
- [Tooltip](#tooltip)
- [Tab Pills](#tab-pills)
## Documentation
After you have installed `@afc-org/js-tailwind` into your project, you can import and use our components like so:
```
```
Or, you can add it from our CDN, and no installation will be required:
```
```
### Alert
You need to add an `id` on the alert wrapper.
After that, on the element that you want to add the closing action/event, you need to add
```
data-close="alert"
data-target="#id-of-the-wrapper"
```
Example usage:
```
primary! This is a primary
alert—check it out!
×
```
### Dropdown
You will need a toggler element, on which to add the following attributes:
```
data-toggle="dropdown"
data-target="#dropdown-id"
data-placement="placement"
```
Where placement can be one of ["top","bottom","left","right"].
And on the dropdown menu wrapper element, the following one:
```
id="dropdown-id"
```
Here is an example:
```
primary
```
### Menu Collpase
You will need a toggler element, on which to add the following attributes:
```
data-toggle="collapse"
data-target="#menu-collapse"
```
And on the collapse element, the following one:
```
id="menu-collapse"
```
**NOTE** you can change `menu-collapse` with any ID you would like.
Here is a full sample code:
```
```
**NOTE**: You can change the following classes `lg:hidden` (button toggler), `lg:flex lg:w-auto` (collapse element), `lg:items-center lg:ml-auto` (list wrapper) and `lg:flex-row` (list wrapper), with any available breakpoint from TailwindCSS (`sm`,`md`,`lg`,`xl`).
**NOTE**: To check the above example, you need to set your window less then 1023px.
### Modal
You will need a toggler element, on which to add the following attributes:
```
data-toggle="modal"
data-target="#modal-id"
```
And then, on the modal components you will need to add the following ids:
- modal wrapper div
```
id="modal-id"
```
- modal inner div
```
id="modal-id-dialog"
```
- modal sibling div
```
id="modal-id-backdrop"
```
Where `modal-id` can be anything
Here is a full example:
```
Open Modal
```
### Navbar Collpase
You will need a toggler element, on which to add the following attributes:
```
data-toggle="collapse"
data-target="#navbar-collapse"
```
And on the collapse element, the following one:
```
id="navbar-collapse"
```
**NOTE** you can change `navbar-collapse` with any ID you would like.
Here is a full sample code:
```
```
**NOTE**: you can change the following classes `lg:hidden` (button toggler), `lg:flex lg:w-auto` (collapse element), `lg:items-center lg:ml-auto` (list wrapper) and `lg:flex-row` (list wrapper), with any available breakpoint from TailwindCSS (`sm`,`md`,`lg`,`xl`).
**NOTE**: To check the above example, you need to set your window less then 1023px.
### Popover
You will need a toggler element, on which to add the following attributes:
```
data-toggle="popover"
data-target="#popover-id"
data-placement="placement"
```
Where placement can be one of ["top","bottom","left","right"].
And on the popover element, the following one:
```
id="popover-id"
```
Here is an example:
```
On right
Popover on right
A long time ago in a galaxy far, far away....
```
### Tooltip
You will need a toggler element, on which to add the following attributes:
```
data-toggle="tooltip"
data-target="#tooltip-id"
data-placement="placement"
```
Where placement can be one of ["top","bottom","left","right"].
And on the tooltip element, the following one:
```
id="tooltip-id"
```
Here is an example:
```
On top
Tooltip on top
```
### Tab Pills
You will need an unordered list, with anchor elements as children of the list items (`ul > li > a`).
On the anchor element you will have to add the following attributes:
```
data-toggle="tab"
href="#id-of-the-content"
class="text-white bg-blue-600" // for active elements
class="bg-transparent text-blue-600" // for non-active elements
```
And on the content to by displayed alongside the tab, you will have to add the same id:
```
id="id-of-the-content"
```
Example usage:
```
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
```
If you wish to change the active classes of the anchor elements, and the non-active classes, you can do so, by calling the initTabs function:
```
// initTabs(activeClasses,normalClasses)
// - activeClasses is for setting the classes for the active tab (anchor element)
// - normalClasses is for setting the classes for all the tabs (anchor elements) expect the
// one that is currently active, if they are unset, then the default ones will be choosen
// activeClasses = "bg-blue-600 text-white"
// normalClasses = "text-blue-600 bg-transparent"
(function () {
initTabs(activeClasses,normalClasses);
}());
```
Here is an example of that usage:
```
(function () {
initTabs("bg-pink-600 text-gray-100","text-pink-600 bg-gray-100");
}());
```
### Styles
Do not forget that you will need to either get a compiled version of TailwindCSS, or to compile your own version, but one that will have the following classes from TailwindCSS:
```
px-5 py-3 border border-solid rounded relative mb-4 absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 outline-none focus:outline-none opacity-50 hover:opacity-75 hover:text-black text-xl inline-block mr-5 align-middle mr-8 bg-indigo-200 text-indigo-800 border-indigo-300 bg-gray-300 text-gray-800 border-gray-400 bg-green-200 text-green-800 border-green-300 bg-red-200 text-red-800 border-red-300 bg-orange-200 text-orange-800 border-orange-300 bg-blue-200 text-blue-800 border-blue-300 bg-white text-gray-600 border-gray-100 bg-gray-400 border-gray-500 left-0 z-50 hidden py-2 text-base text-left list-none mt-1 mb-1 mr-1 ml-1 block w-full py-1 px-6 clear-both font-normal whitespace-no-wrap border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500 text-white bg-blue-500 text-gray-400 pointer-events-none mb-2 flex flex-wrap items-center bg-gray-600 justify-between px-4 bg-blue-600 container mx-auto lg:px-4 px-0 capitalize mr-4 leading-relaxed ml-auto cursor-pointer px-3 text-gray-300 lg:hidden lg:flex lg:w-auto flex-grow lg:items-center lg:ml-auto pl-0 mb-0 flex-col lg:flex-row px-2 no-underline mb-3 leading-normal text-sm break-words text-center bg-black mr-2 ml-2 bg-green-600 bg-red-600 bg-yellow-500 bg-teal-500 bg-gray-100 text-gray-900 text-black bg-gray-800 -mb-px flex-auto text-blue-600 hover:text-blue-700 cursor-default rounded-t border-transparent border-b-0 border-b border-gray-200 sm:flex-row md:flex-row xl:flex-row navbar-expand sm:hidden md:hidden xl:hidden p-4 pointer-events-auto border-gray-600 transition-transform duration-300 ease-out w-auto m-2 sm:my-8 sm:mx-auto transform -translate-y-1 sm:max-w-xs md:max-w-screen-md lg:max-w-screen-lg sm:max-w-screen-sm justify-end p-3 border-t border-gray-300 rounded-b items-start opacity-0 fixed h-full overflow-hidden transition-opacity duration-75 ease-linear font-medium leading-tight mb-3mr-3 ml-3 mt-3
```
If you use `purge`, `postcss-purgecss`, `postcss` or any other tool to delete unused `css`, you can add the following array into your ignore (i.e. keep classes / whitelist etc.):
```
["px-5","py-3","border","border-solid","rounded","relative","mb-4","absolute","bg-transparent","text-2xl","font-semibold","leading-none","right-0","top-0","outline-none","focus:outline-none","opacity-50","hover:opacity-75","hover:text-black","text-xl","inline-block","mr-5","align-middle","mr-8","bg-indigo-200","text-indigo-800","border-indigo-300","bg-gray-300","text-gray-800","border-gray-400","bg-green-200","text-green-800","border-green-300","bg-red-200","text-red-800","border-red-300","bg-orange-200","text-orange-800","border-orange-300","bg-blue-200","text-blue-800","border-blue-300","bg-white","text-gray-600","border-gray-100","bg-gray-400","border-gray-500","left-0","z-50","hidden","py-2","text-base","text-left","list-none","mt-1","mb-1","mr-1","ml-1","block","w-full","py-1","px-6","clear-both","font-normal","whitespace-no-wrap","border-0","hover:text-gray-900","hover:bg-gray-100","active:text-white","active:bg-blue-500","text-white","bg-blue-500","text-gray-400","pointer-events-none","mb-2","flex","flex-wrap","items-center","bg-gray-600","justify-between","px-4","bg-blue-600","container","mx-auto","lg:px-4","px-0","capitalize","mr-4","leading-relaxed","ml-auto","cursor-pointer","px-3","text-gray-300","lg:hidden","lg:flex","lg:w-auto","flex-grow","lg:items-center","lg:ml-auto","pl-0","mb-0","flex-col","lg:flex-row","px-2","no-underline","mb-3","leading-normal","text-sm","break-words","text-center","bg-black","mr-2","ml-2","bg-green-600","bg-red-600","bg-yellow-500","bg-teal-500","bg-gray-100","text-gray-900","text-black","bg-gray-800","-mb-px","flex-auto","text-blue-600","hover:text-blue-700","cursor-default","rounded-t","border-transparent","border-b-0","border-b","border-gray-200","sm:flex-row","md:flex-row","xl:flex-row","navbar-expand","sm:hidden","md:hidden","xl:hidden","p-4","pointer-events-auto","border-gray-600","transition-transform","duration-300","ease-out","w-auto","m-2","sm:my-8","sm:mx-auto","transform","-translate-y-1","sm:max-w-xs","md:max-w-screen-md","lg:max-w-screen-lg","sm:max-w-screen-sm","justify-end","p-3","border-t","border-gray-300","rounded-b","items-start","opacity-0","fixed","h-full","overflow-hidden","transition-opacity","duration-75","ease-linear","font-medium","leading-tight","mb-3mr-3","ml-3","mt-3"]
```
Then, you can import your styles inside your files like so:
```
```
**NOTE**: alternatively, you can leave the components without any TailwindCSS styling code and render only HTML.
## Dependencies
**@afc-org/js-tailwindj** to properly work needs the following dependencies:
```
```
Or
```
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
| Chrome | Firefox | Edge | Safari | Opera |
|:---:|:---:|:---:|:---:|:---:|
| 
| 
| 
| 
| 
|
## Reporting Issues
We use GitHub Issues as the official bug tracker for the Angular Landing Page. Here are some advices for our users that want to report an issue:
1. Make sure that you are using the latest version of the @afc-org/js-tailwind.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
## Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
## Licensing
- Copyright 2020 @afc-org/js-tailwind
- Licensed under MIT
## Resources
- AFC-ORG projects: https://github.com/afc-org/
- JavaScript & TailwindCSS: https://github.com/afc-org/js-tailwind
- Angular & TailwindCSS: https://github.com/afc-org/angular-tailwind
- React & TailwindCSS: https://github.com/afc-org/react-tailwind
- Svelte & TailwindCSS: https://github.com/afc-org/svelte-tailwind
- VueJS & TailwindCSS: https://github.com/afc-org/vue-tailwind
- Issues: Github Issues Page