Tailwind Color Picker

Thomas · July 9, 2020, 2:54pm

Hi guys,

saw the color picker of TailwindCSS and wanted to ask if this is a “secret”? Or is there any pointer and/or documentation to rebuild this by myself? I’m asking, cause it would be a perfect fit for my Reginald Framework.

Any help required and thanks in advance.

Cheers

Thomas

RobM · July 9, 2020, 3:08pm

Hi @Thomas,
No specific documentation for this, yet. I might be able to look through the code (haven’t seen the final production version) and give you some pointers.
Cheers,
Bob

Thomas · July 9, 2020, 3:26pm

Excellent - looking forward to.

Cheers

Thomas

RobM · July 9, 2020, 6:06pm

Hi again,
I just got a chance to crack open the code. The actual Tailwind add-on is encoded. I should have realized this - likely needed for controlling license access. At any point, In looking at the make-up of the control and poking around in the exposed codebase, it looks like it is built through a pretty standard custom control. Here is some documentation on them - scroll to the section nearest the bottom of the document.

github.com

Pinegrow/PinegrowDevelopersDocumentation/blob/master/Custom Controls.md

## Custom Controls
---
### Overview
Custom controls allow for a more customized appearance for a plugin. They also allow for the construction of more complex controls. One example of this would be a set of side-by-side dropdown menus to set column numbers for each breakpoint. At a basic level, Pinegrow provides two methods to create controls with a custom look - the ```toggle_buttons``` key plus ```html``` key with or without the ```PgToggleButtonMaker()``` constructor. At a more advanced level the Pinegrow API a series of keys and helper functions for novel layouts.

**toggle_buttons**  
As briefly mentioned in the documentation of the ```select``` type, this key works along with the ```html``` key. This key takes a boolean value and if set to true it converts the dropdown list to side-by-side buttons. Reguires the use of the ```html``` key in the option list.

**html**  
This key takes an HTML string of function that returns an HTML string as value and should be provided as the third key in an individual option object within an option array. This HTML string can contain inline styling and classes. 
```javascript
options: [
	{
		key: 'push',
		name: 'Push',
		html: '<div class="pg-tb-button pg-tb-button-text" style="font-weight: 700; color: white;" title="Push">Push</div>'
	},
	{
		key: 'slide',
		name: 'Slide',

This file has been truncated. show original

Thomas · July 9, 2020, 6:27pm

Hi @RobM

many thanks for pointing me to the documentation. Very interesting and a lot of stuff to review.

Coming back to you for sure.

Cheers

Thomas

Topic		Replies	Views
Customising Tailwind Frameworks	5	392	October 21, 2022
Purchased Pinegrow, seeking to learn Tailwind Beginners	3	520	May 13, 2021
Customizing a Tailwind CSS theme - The complete tutorial General	2	603	August 31, 2020
Support for Alpine JS Feature Request	5	2837	December 29, 2023
UIkit plugin for Pinegrow available! Third Party Plugins	13	2356	June 12, 2020

Tailwind Color Picker

Related Topics