leeshadle

Hi @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.

Hi @popedcorn!

Definitely, you can change the Tailwind configuration to use a different separator. Here is the documentation 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 that doesn’t support special characters in class names.

And you would simply add the ‘separator’ key to your Tailwind configuration:

separator: '_',

A bit more context based on the Draft plugin default configuration:

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 3 months, 1 week ago by leeshadle.

Thank you for posting this @d3xt3r_adam5, I’m glad to hear updating to the latest version of WP fixes the issue!

Thank you @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. ??

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 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?

Ouch @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.

Hi @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

This has been resolved.

Thank you @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.

Hi @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.

Hi @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:

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,
    },
}

Hi @cvladan!

I’m so sorry, this is a major, and disappointing issue for me as well…

A recent Gutenberg update iframed the block editor and it broke the ability to enqueue Tailwind in the block editor:

https://github.com/WordPress/gutenberg/issues/44945

I’m working on a workaround until this is resolved, but at them moment styles are only working on the frontend…