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