@afc-org/js-tailwind

v0.1.0

Dynamic components for Tailwindcss and JavaScript

javascriptvannilajsvannila-jstailwindtailwindcsspackagecomponentsframeworktailwind-frameworkjavascript-framework

3/weekUpdated 3 years agoMITUnpacked: 546.3 KB

Published by afc-org

npmyarnpnpmbun

npm install @afc-org/js-tailwind

RepositoryHomepagenpm

ReadmeDependencies(0)Versions(1)

@afc-org/js-tailwind

!version !license !GitHub issues open !GitHub issues closed

$3

@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
* Components
* Quick Start
* Documentation
* Dependencies
* Browser Support
* Reporting Issues
* Licensing
* Resources

Versions

|Angular|JavaScript|React|Svelte|VueJS|
| --- | --- | --- | --- | --- |
| !Check Angular | !Check JavaScript | !Check React | !Check Svelte | !Check VueJS|

Quick Start

Add the following CDN to your project:
``

`

Components

- Alert
- Dropdown
- Menu Collpase
- Modal
- Navbar Collpase
- Popover
- Tooltip
- 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:
`

`

$3

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:
`
class=" px-5 py-3 border border-solid rounded relative mb-4 bg-indigo-200 text-indigo-800 border-indigo-300"
id="alert-id-88325020"
>


primary! This is a primary
alert—check it out!

class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 outline-none focus:outline-none opacity-50 px-5 py-3 hover:opacity-75 hover:text-black"
data-close="alert"
data-target="#alert-id-88325020"
>
×




`

$3

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:
`
class="bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle"
type="button"
data-toggle="dropdown"
data-target="#dropdown-77650932"
data-placement="bottom"
style="transition: all .15s ease"
>
primary



class="py-2 text-base text-left list-none bg-white border border-solid border-gray-100 rounded"
style="min-width:12rem"
>
class="block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500"
href="#pablo"
>
Item 1

class="block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500"
href="#pablo"
>
Item 2

class="block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500"
href="#pablo"
>
Item 3

class="block w-full py-1 px-6 clear-both font-normal text-gray-800 whitespace-no-wrap bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100 active:text-white active:bg-blue-500"
href="#pablo"
>
Item 4







`

$3

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.

$3

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:
`
class="capitalize mb-4 bg-yellow-500 border border-solid border-yellow-500 hover:bg-yellow-600 hover:border-yellow-700 active:bg-yellow-600 active:border-yellow-700 text-gray-800 w-full block text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle"
data-target="#regular-modal"
data-toggle="modal"
style="transition: all .15s ease"
>
Open Modal


class="opacity-0 z-50 fixed top-0 left-0 hidden w-full h-full overflow-hidden outline-none focus:outline-none transition-opacity duration-75 ease-linear"
id="regular-modal"
style="display:none"
>
class=" transition-transform duration-300 ease-out relative w-auto m-2 pointer-events-none sm:my-8 sm:mx-auto transform -translate-y-1 sm:max-w-screen-sm"
id="regular-modal-dialog"
>
class=" relative flex flex-col w-full pointer-events-auto bg-white border border-solid border-gray-600 rounded outline-none focus:outline-none"
>
class=" flex items-start justify-between p-4 border-b border-solid border-gray-300 rounded-t"
>
class="text-xl mb-2 font-medium leading-tight leading-normal"
>
This is a Normy Modal

type="button"
class=" float-right text-2xl font-bold text-black leading-none bg-transparent border-0 opacity-50 p-4 -mr-4 -mt-4 -mb-4 ml-auto cursor-pointer"
data-target="#regular-modal"
data-toggle="modal"
>
×



A long time ago in a galaxy far, far away....

The Normy Modal was just a normal-sized modal, working for
the better of the empire, day by day, being a loyal
soldier, not asking any questions, doing his part for
empowering the empire.

class=" flex flex-wrap items-center justify-end p-3 border-t border-solid border-gray-300 rounded-b"
>
class="m-1 bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle"
style="transition: all .15s ease"
>
Save changes

class="m-1 bg-gray-600 border border-solid border-gray-600 hover:bg-gray-700 hover:border-gray-800 active:bg-gray-700 active:border-gray-800 text-white text-base px-3 py-2 leading-tight rounded font-normal outline-none focus:outline-none align-middle"
data-target="#regular-modal"
data-toggle="modal"
style="transition: all .15s ease"
>
Close







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:
`


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:
`
class=" text-sm px-2 py-1 leading-normal bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white rounded font-normal outline-none focus:outline-none align-middle"
data-toggle="popover"
data-target="#popover-75076477"
data-placement="right"
style="transition: all .15s ease"
>
On right


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:
`
class=" text-sm px-2 py-1 leading-normal bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white rounded font-normal outline-none focus:outline-none align-middle"
data-toggle="tooltip"
data-target="#tooltip-87505381"
style="transition: all .15s ease"
>
On top



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:
`


• 
  
  Home
  
  


• 
  
  Profile
  
  


• 
  
  Messages
  
  


`

$3

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

Licensing

- Copyright 2020 @afc-org/js-tailwind

- Licensed under MIT

Resources