Changing the Tailwind Separator from : to – in Plugin Settings

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 7 months, 2 weeks ago by leeshadle.