Title: leeshadle's Replies | WordPress.org --- # leeshadle [ ](https://wordpress.org/support/users/leeshadle/) * [Profile](https://wordpress.org/support/users/leeshadle/) * [Topics Started](https://wordpress.org/support/users/leeshadle/topics/) * [Replies Created](https://wordpress.org/support/users/leeshadle/replies/) * [Reviews Written](https://wordpress.org/support/users/leeshadle/reviews/) * [Topics Replied To](https://wordpress.org/support/users/leeshadle/replied-to/) * [Engagements](https://wordpress.org/support/users/leeshadle/engagements/) * [Favorites](https://wordpress.org/support/users/leeshadle/favorites/) Search replies: ## Forum Replies Created Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/users/leeshadle/replies/page/2/?output_format=md) [→](https://wordpress.org/support/users/leeshadle/replies/page/2/?output_format=md) * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Source code missing](https://wordpress.org/support/topic/source-code-missing-2/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [8 months, 3 weeks ago](https://wordpress.org/support/topic/source-code-missing-2/#post-18722645) * Sorry [@nico23](https://wordpress.org/support/users/nico23/) I’m not fully understanding the code you wanted and you mentioned being interested in including the entire Gutenberg sidebar. Here’s the code for the class selector: * ```wp-block-code /** * External Dependencies *//** * WordPress Dependencies */import { __ } from '@wordpress/i18n';import { createHigherOrderComponent } from '@wordpress/compose';import { BlockControls, InspectorAdvancedControls } from '@wordpress/block-editor';import { BaseControl, Button, MenuGroup, ToolbarDropdownMenu, TextControl } from "@wordpress/components";import { dispatch, useSelect } from '@wordpress/data';import { getPath } from '@wordpress/url';const { openGeneralSidebar } = dispatch( 'core/edit-post' ) || {};const { openGeneralSidebar: openGeneralSidebarSiteEditor } = dispatch( 'core/edit-site' ) || {};/** * Internal Dependencies */import ClassPicker from '../../components/class-picker';import pluginIcons from '../../utils/icons';import './index.scss';const slug = 'draft';const addUtilityClassesToBlockEdit = createHigherOrderComponent( ( BlockEdit ) => { return ( props ) => { const { setAttributes, isSelected, } = props; let { attributes: { className, }, } = props; const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' ); const { pluginSettings, isSavingPost, isAutosavingPost } = useSelect( ( select ) => { const pluginSettings = select( ${ slug }/settings ).getPluginSettings(); // const isSavingPost = select('core/editor').isSavingPost(); // const isAutosavingPost = select('core/editor').isAutosavingPost(); return { pluginSettings, // isAutosavingPost, // isSavingPost, }; } ); const { mode } = pluginSettings; const onChange = ( newValues, { action, removedValue } ) => { if( !! newValues ) { className = newValues .map( ( newValue ) => { let { value } = newValue; return value; } ) .toString() .replace( /,/g, ' ' ); } if( ! newValues ) { className = ''; } setAttributes( { className, } ); }; if( !! className ) { className = className.split( ' ' ); className = className.map( ( option ) => { return { label: option.replace( 'tw-', '' ), value: option, }; } ) } return ( <> { mode === 'development' && <> { ( { onClose } ) => ( <> className.value ).toString().replace(/,/g,' ') : '' } onChange={ ( nextValue ) => { setAttributes( { className: nextValue !== '' ? nextValue : undefined, } ) } } /> ) } } ); } }, 'addUtilityClassesToBlockEdit');const name = 'add-utility-classes-to-blocks';const filters = [ { hookName: 'editor.BlockEdit', namespace: ${ slug }/add-draft-classes-to-block-edit, callback: addUtilityClassesToBlockEdit, },];export { name, filters }; ``` * I think the key part you’re looking for is using the InspectorAdvancedControls component: * ```wp-block-code import { BlockControls, InspectorAdvancedControls } from '@wordpress/block-editor'; ``` * And then you just drop children in there: * ```wp-block-code ``` * I’m sharing code snippets to try and help you find what you’re looking for. It’s not resistance so much as the plugin is free, there aren’t many new users using the plugin, few free plugin customers convert to paid plugin customers, and I’m a one person operation. 🥴 * Hopefully this gives you the information you need. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Source code missing](https://wordpress.org/support/topic/source-code-missing-2/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [8 months, 3 weeks ago](https://wordpress.org/support/topic/source-code-missing-2/#post-18722571) * Got it, you’re wanting to bake the sidebar into your plugin? Here’s how that’s done: * ```wp-block-code /** * External Dependencies *//** * WordPress Dependencies */import { __ } from '@wordpress/i18n';import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';/*** Internal Dependencies*/import WelcomeGuide from '../../components/welcome-guide';import pluginIcons from '../../utils/icons';import Settings from '../../components/settings';import './index.scss';const slug = 'draft';const Plugin = ( props ) => { if ( !! wp.data.select('core/editor').getCurrentPostType() ) { return ( <> { __( 'Draft settings', 'draft' ) } ); } return ( <> { __( 'Draft settings', 'draft' ) } );};const name = ${ slug };const settings = { icon: pluginIcons.plugin, render: Plugin,};export { name, settings }; ``` * I think the key part of the plugin guidelines is this: _We strongly recommend you document how any development tools are to be used._ * Otherwise, the source code isn’t obscured in anyway, it’s compiled for production. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Source code missing](https://wordpress.org/support/topic/source-code-missing-2/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [8 months, 3 weeks ago](https://wordpress.org/support/topic/source-code-missing-2/#post-18722546) * Hi [@nico23](https://wordpress.org/support/users/nico23/)! * Thanks for reaching out, as far as I know since the switch to Gutenberg including the uncompiled source code isn’t required. * I don’t have much in the index.js file as I’m mostly autoloading a bunch of things. here’s the index.js source code: * ```wp-block-code /** * External Dependencies *//** * WordPress Dependencies// */import { registerBlockType } from '@wordpress/blocks';import { registerFormatType } from '@wordpress/rich-text';import { registerPlugin } from '@wordpress/plugins';import { select, register, useSelect } from '@wordpress/data';import { addFilter } from '@wordpress/hooks';/** * Internal Dependencies */import './style.scss';import './index.scss';import * as darkModeToggle from './blocks/dark-mode-toggle';const blocks = [ darkModeToggle,];blocks.forEach( ( { name, settings } ) => { registerBlockType( name, settings ); } );import * as addUtilityClassesToBlocks from './filters/add-utility-classes-to-blocks';import * as addDarkModeClassToEditor from './filters/add-dark-mode-class-to-editor';import * as groupLink from './filters/group-link';import * as queryTitleFilter from './filters/query-title-filter';const filters = [ addUtilityClassesToBlocks, addDarkModeClassToEditor, groupLink, queryTitleFilter,];filters.forEach( ( { name, filters } ) => { filters.forEach( ( { hookName, namespace, callback } ) => { addFilter( hookName, namespace, callback ); } );} );import * as inlineClasses from './formats/inline-classes';registerFormatType( inlineClasses.name, inlineClasses.settings );import * as pluginSettings from './plugins/plugin-settings';const plugins = [ pluginSettings,];plugins.forEach( ( { name, settings } ) => { registerPlugin( name, settings ); } );import * as pluginSettingsStore from './stores/plugin-settings';register( pluginSettingsStore.store ); ``` - This reply was modified 8 months, 3 weeks ago by [leeshadle](https://wordpress.org/support/users/leeshadle/). - This reply was modified 8 months, 3 weeks ago by [leeshadle](https://wordpress.org/support/users/leeshadle/). * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Tailwind version 4.0](https://wordpress.org/support/topic/tailwind-version-4-0/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [1 year, 5 months ago](https://wordpress.org/support/topic/tailwind-version-4-0/#post-18302980) * Hi [@codehouseno](https://wordpress.org/support/users/codehouseno/)! * Yes it is actively maintained and I definitely plan on updating to Tailwind CSS v4.0. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Nesting CSS](https://wordpress.org/support/topic/nesting-css/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [1 year, 10 months ago](https://wordpress.org/support/topic/nesting-css/#post-18032058) * Hi [@rishiichaudharyy](https://wordpress.org/support/users/rishiichaudharyy/)! * Thank you for letting me know! 🙏 * This was a bug and has been fixed. I just released a new version with the fix 3.0.9. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Changing the Tailwind Separator from : to – in Plugin Settings](https://wordpress.org/support/topic/changing-the-tailwind-separator-from-to-in-plugin-settings/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [1 year, 11 months ago](https://wordpress.org/support/topic/changing-the-tailwind-separator-from-to-in-plugin-settings/#post-17955856) * Hi [@popedcorn](https://wordpress.org/support/users/popedcorn/)! * Definitely, you can change the Tailwind configuration to use a different separator. Here is the [documentation](https://tailwindcss.com/docs/configuration#separator) from Tailwind. * To save you a trip to the documentation here’s what it says: * **The `separator` option lets you customize which character should be used to separate modifiers (screen sizes, `hover`, `focus`, etc.) from utility names (` text-center`, `items-end`, etc.).** * **We use a colon by default (`:`), but it can be useful to change this if you’re using a templating language like [Pug](https://pugjs.org/) that doesn’t support special characters in class names.** * And you would simply add the ‘separator’ key to your Tailwind configuration: * ```wp-block-code separator: '_', ``` * A bit more context based on the Draft plugin default configuration: * ```wp-block-code var tailwind = !! tailwind ? tailwind : window.tailwind;tailwind.config = { important: true, darkMode: 'selector', separator: '_', theme: { /* max-width responsive breakpoints */ screens: { md: { 'max': '1023px' }, sm: { 'max': '767px' }, }, colors: { primary: tailwind.colors.slate, secondary: tailwind.colors.white, text: tailwind.colors.slate, accent: tailwind.colors.sky, transparent: tailwind.colors.transparent, current: tailwind.colors.current, }, extend: { boxShadow: { inset: 'inset 0 1px 0 0 rgb(255 255 255 / 20%)', }, colors: { primary: { DEFAULT: tailwind.colors.slate['900'] }, secondary: { DEFAULT: tailwind.colors.white }, text: { DEFAULT: tailwind.colors.slate['600'] }, accent: { DEFAULT: tailwind.colors.sky['500'] } }, fontFamily: { primary: [ 'Inter', { fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32' } ], secondary: [ 'Inter', { fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32' } ], text: [ 'Inter', { fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32' } ], accent: [ 'Inter', { fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32' } ], }, listStyleType: { circle: 'circle', square: 'square', }, }, }, corePlugins: { preflight: false, },} ``` - This reply was modified 1 year, 11 months ago by [leeshadle](https://wordpress.org/support/users/leeshadle/). * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] The “draft” plugin has encountered an error and cannot be rendered.](https://wordpress.org/support/topic/the-draft-plugin-has-encountered-an-error-and-cannot-be-rendered/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [2 years ago](https://wordpress.org/support/topic/the-draft-plugin-has-encountered-an-error-and-cannot-be-rendered/#post-17939735) * Thank you for posting this [@d3xt3r_adam5](https://wordpress.org/support/users/d3xt3r_adam5/), I’m glad to hear updating to the latest version of WP fixes the issue! * Forum: [Reviews](https://wordpress.org/support/forum/reviews/) In reply to: [[Draft - Tailwind CSS for WordPress.] i love you who make this](https://wordpress.org/support/topic/i-love-you-who-make-this/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [2 years ago](https://wordpress.org/support/topic/i-love-you-who-make-this/#post-17937389) * Thank you [@andiganteng](https://wordpress.org/support/users/andiganteng/)! 🙏 You nailed it, this is why I created this initially for myself so I could have complete control over the frontend using Tailwind CSS utility classes! I’m so happy you’re enjoying the plugin. 🙃 * Forum: [Reviews](https://wordpress.org/support/forum/reviews/) In reply to: [[Draft - Tailwind CSS for WordPress.] This guy developed a price tag on top of free software](https://wordpress.org/support/topic/this-guy-developed-a-price-tag-on-top-of-free-software/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [2 years, 1 month ago](https://wordpress.org/support/topic/this-guy-developed-a-price-tag-on-top-of-free-software/#post-17873437) * The paid plugin doesn’t use the CDN code on the frontend, it only loads the compiled Tailwind. I don’t understand how people get the premium features by pasting that code into their site? * Also, they’d probably want a config file too, which they’d have to drop in as well. Easily adding a config file is also a feature of the free plugin. * People may also want to use the [@apply](https://wordpress.org/support/users/apply/) Tailwind function so they can add custom CSS that uses Tailwind classes. You’d need to drop that in as well. This is also functionality included in the free plugin. * If it was as easy to drop Tailwind in as you say, why would 1000+ people even bother using my plugin? * Again, I feel that your review is unfair and inaccurate. Could you please change your rating or remove it? * Forum: [Reviews](https://wordpress.org/support/forum/reviews/) In reply to: [[Draft - Tailwind CSS for WordPress.] This guy developed a price tag on top of free software](https://wordpress.org/support/topic/this-guy-developed-a-price-tag-on-top-of-free-software/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [2 years, 1 month ago](https://wordpress.org/support/topic/this-guy-developed-a-price-tag-on-top-of-free-software/#post-17873425) * Ouch [@sunlifter](https://wordpress.org/support/users/sunlifter/), a 1 star rating not only hurts, I don’t think it’s fair or accurate. Especially for an indie maker such as myself 😭 * I’d love to know what php tailwind compilers you’re referring to? Please point me in the direction. * I need to point out that this plugin is free and always will be. I needed to put some feature behind a paywall to help fund the development of this plugin. For better or worse I choose compiling Tailwind as that feature. You are accurate in you’re statement that I “try to make money”, because I’ve barely made anything on the paid plugin 🤣 * Also, although Adam Wathan does recommend against using the CDN in production, the performance impact is in my opinion negligible for most users. I’ve seen a 6-10 point reduction in Lighthouse performance scores. Unless you’re Amazon or Walmart that is not going to affect the bottom line of the vast majority of websites. In fact, using the Draft plugin would probably increase performance for most sites because they could use native Gutenberg blocks for most layouts and wouldn’t need a page builder. * Please reconsider your 1 star rating. It really isn’t justified and it does feel malicious. Or you could simply remove your review and use the TailPress plugin. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Settings saving problem](https://wordpress.org/support/topic/settings-saving-problem/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [2 years, 4 months ago](https://wordpress.org/support/topic/settings-saving-problem/#post-17560812) * Hi [@jaroslawjakowenko](https://wordpress.org/support/users/jaroslawjakowenko/)! * Thank you for letting me know about this error 🙏 * I fixed this bug and you should now be able to save the settings. Please let me know if you are still running into issues. * Thank you again!! * Lee * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Uncaught ReferenceError: toggleFeature is not defined](https://wordpress.org/support/topic/uncaught-referenceerror-togglefeature-is-not-defined/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [2 years, 4 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-togglefeature-is-not-defined/#post-17530932) * This has been resolved. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Uncaught ReferenceError: toggleFeature is not defined](https://wordpress.org/support/topic/uncaught-referenceerror-togglefeature-is-not-defined/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [2 years, 4 months ago](https://wordpress.org/support/topic/uncaught-referenceerror-togglefeature-is-not-defined/#post-17530931) * Thank you [@francismacomber](https://wordpress.org/support/users/francismacomber/) for letting me know! 🙏 I just released a plugin update to fix this bug. Please let me know if you run into any more issues. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] Compilation](https://wordpress.org/support/topic/compilation/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [3 years, 5 months ago](https://wordpress.org/support/topic/compilation/#post-16493285) * Hi [@ju5t](https://wordpress.org/support/users/ju5t/)! * It adds Tailwind CSS globally so you can use it with the block editor or a classic editor. No you don’t need to add another version of Tailwind for a theme. * Yes it is using the JIT compiler. The pro version of the plugin gives you the ability to purge unused styles and only load styles used on the site. That being said the JIT compiler is actually very performant. I’ve been able to consistently get a 93 performance Google Lighthouse score with the JIT vs a 100 performance Google Lighthouse score compiling unused styles with the pro Draft plugin. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Draft - Tailwind CSS for WordPress.] bg-red-400](https://wordpress.org/support/topic/bg-red-400/) * Plugin Author [leeshadle](https://wordpress.org/support/users/leeshadle/) * (@leeshadle) * [3 years, 6 months ago](https://wordpress.org/support/topic/bg-red-400/#post-16457784) * Hi [@damienlopvet](https://wordpress.org/support/users/damienlopvet/)! * You should be able to use any Tailwind utility classes. However, the default configuration shipped with the plugin limits the colors to only a handful to keep the utility class selector snappy. * Could you share your configuration with me? I’m guessing that’s why you’re not seeing it. If you remove the colors key in the configuration file you can access all the default Tailwind colors, such as bg-red-400: * ```wp-block-code var tailwind = !!tailwind ? tailwind : window.tailwind; tailwind.config = { important: true, theme: { /* max-width responsive breakpoints */ screens: { md: { 'max': '1023px' }, sm: { 'max': '767px' }, }, colors: { primary: tailwind.colors.slate['900'], secondary: tailwind.colors.white, text: 'var(--color-text)', accent: tailwind.colors.sky['500'], neutral: tailwind.colors.slate, transparent: tailwind.colors.transparent, current: tailwind.colors.current, }, extend: { boxShadow: { inset: 'inset 0 1px 0 0 rgb(255 255 255 / 20%)', }, fontFamily: { primary: tailwind.defaultConfig.theme.fontFamily.sans, secondary: tailwind.defaultConfig.theme.fontFamily.sans, text: tailwind.defaultConfig.theme.fontFamily.sans, accent: tailwind.defaultConfig.theme.fontFamily.sans, }, listStyleType: { circle: 'circle', square: 'square', }, }, }, corePlugins: { preflight: false, }, } ``` Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/users/leeshadle/replies/page/2/?output_format=md) [→](https://wordpress.org/support/users/leeshadle/replies/page/2/?output_format=md)