Documentation
Docs

Configuring Tailwind

ska-blocks plugin comes with controls for editing Tailwind configuration.

The controls can be accessed from the ska-tailwind Block Editor plugin item in the top right corner of the Block Editor screen:

The Tailwind icon also displays a number when there is currently ongoing compilation occurring.

This is simply an indicator and you don’t have to do anything other than wait for it to complete.

When you change a Tailwind option, all the blocks will automatically re-compile to ensure they are using the latest Tailwind configuration. For that reason, when you update the Tailwind configuration you may need to save changes twice in a row – once to apply the new configuration, second time to save all the re-compiled CSS.
When you go to change another post or a template then the blocks will also automatically re-compile if the configuration has changed in the meantime.

Most common options

While the option is there, it’s rare that you’ll want to go and change the spacing scale, flex-basis options or skew transform angles. The main things you’ll want to configure on a new site are: Colors, Fonts and Border radius.

Colors

There are 3 groups of colors under ska-tailwind -> Colors.

  • Colors
  • Color palette
  • Theme palette

The first 2 are defaults from Tailwind CSS. Colors are simply specific colors with 1 value only, while Color palette has color variants ranging from 50 to 950.

Theme palette is created for the purpose of providing values that ska-theme can utilize throughout the WordPress theme. This is the main thing you may want to customize when it comes to the color palette of your site.

Site palette

Defines the text colors used in various locations and some defaults.

  • DEFAULT – main text color
  • heading – text color to use with headings
  • subtext – light text color
  • muted – muted text color
  • inverted – text color for dark backgrounds
  • background – body background color
  • border – default border color to use when using border class with no color specified
  • ring – default ring color to use when using ring class with no color specified

The text-site class can be used for adding the default text color to something, text-site-inverted for default text color on dark backgrounds.

Primary palette

Used for Primary color in various locations, such as Primary button.

Insert a primary color and you’ll be given suggestions for the light and dark variants, which can be used for things like hover and active states of a primary button, rather than modifying the opacity value.

Allows using classes bg-primary, bg-primary-light and bg-primary-dark.

Secondary palette

Same as primary, but an alternative. If you need a third or a forth color, simply add more palettes as you see fit.

Plain palette

Plain color is used in various locations as well, such as WooCommerce tables, cart, checkout.

Rather than using gray-200 in one place, slate-100 in another, neutral-50, stone-150, they all look quite similar but are not the same. But having plain, plain-light and plain-dark can help keep things consistent as well.

Link palette

Determines the color that <a> elements use. The palette provides the classes text-link, text-link-hover and text-link-active.

Fonts

Under ska-tailwind -> Typography -> Font family you’ll have the 3 default Tailwind fonts: sans, serif and mono:

If you’d just like to use a font like Inter everywhere, edit the sans font and add an External font source:

But if you need multiple fonts you should hit the little plus icon in the bottom right corner to add another font, give it a name and Edit it to configure its’ (optional) external font (Google font or Variable google font by default) and fallback fonts:

Once saved, you can use the font when using Tailwind font family class:

When using ska-theme, from ska-theme -> Typography you can also change the base and heading font families to use any fonts that have been defined in Tailwind configuration:

If you have added a font via WordPress, you can add its’ name to the Local fonts list. The font from the top of the list is used first.

Border radius

Edit the ska-tailwind -> Borders -> Border radius option to set the value for DEFAULT border radius. By default there is 0.25rem border radius, but if you’re creating a site that doesn’t use rounded corners set the value of DEFAULT to 0, then any presets that use the rounded class out of the box won’t actually produce any border radius, but you can still add radius where needed with rounded-sm or rounded-md classes as well as arbitrary values like rounded-[1px]. Or increase the DEFAULT value if you’re going for an extra rounded appearance.

Variables

ska-tailwind -> Miscellaneous -> Variables is a custom option that turns Tailwind configuration values into CSS variables. For example, when Spacing 16 is configured to be 4rem and you use gap-16 class, it will actually produce .gap-16 { gap: var(--ska-spacing-16) } (and :root { --ska-spacing-16: 4rem }) instead of .gap-16 { gap: 4rem }.

When using ska-theme variables enabled for Colors, Theme palette, Font family, Font size, Font weight, Letter spacing, Spacing and Border radius. This means if you were to change the Tailwind configuration of these values, they will reflect instantly on all pages that are utilizing them, since no recompilation is needed.

Tailwind plugins

Since the Tailwind compiler that ska-blocks uses runs in a web worker, it is not possible to pass it functions. As a workaround, simple custom plugins can be passed as strings that will be eval-d in the worker. The JavaScript hook ska.blocks.tailwind.plugins can be used to do just that.

Adding a custom variant using PHP in the child theme’s functions.php file:

add_action('admin_init', function() {
	if(!function_exists('ska_blocks')) {
		return;
	}
	$js = <<<JS
	wp.hooks.addFilter('ska.blocks.tailwind.plugins', 'custom-tailwind-plugin', (plugins) => {
		return [
			...plugins,
			`(plugin, config) => {
				return plugin(({addVariant}) => {
					addVariant('customvariant', '&:is(.custom-variant)')
				})
			}`,
		]
	})
	JS;
	wp_add_inline_script(ska_blocks()->get_script_handle('blocks'), $js, 'before');
}, 15);

With the addVariant('customvariant', '&:is(.custom-variant)') line a new variant is created that can be used like customvariant:border-4, which produces CSS that only applies 4px border to the element if it also has the class .custom-variant.

By default, ska-blocks includes the following custom variants:

addVariant('editor', ':is(.is-root-container) &') // Apply rules in block editor only
addVariant('parent', ':has(>&)') // Apply rules to parent element
addVariant('[type=input]', '&:is([type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select)') // Apply rules to all form inputs

Custom configuration

ska-tailwind -> Miscellaneous -> Custom configuration allows to enter a custom configuration object, but your custom values will not be reflected in the UI when editing Tailwind classes on a block.

The custom configuration object has access to the config variable which is the root Tailwind configuration and when extending it you should spread all the existing values:

{
	...config,
	theme: {
		...config.theme,
		extend: {
			...config.theme.extend,
		},
	},
}

Example – adding an animation:

{
	...config,
	theme: {
		...config.theme,
		extend: {
			...config.theme.extend,
			keyframes: {
				...config.theme.extend.keyframes,
				wiggle: {
					'0%, 100%': { transform: 'rotate(-3deg)' },
					'50%': { transform: 'rotate(3deg)' },
				},
			},
		},
	},
}

After adding the animation keyframes, you should also add the animation to ska-tailwind -> Transitions & Animation -> Animation:

wiggle 1s ease-in-out infinite

Now it should also be visible in the UI:

You can also add custom plugins as strings that will be eval-d directly in the the config:

{
	...config,
	evalPlugins: [
		...config.evalPlugins,
		"plugin => plugin(({addVariant}) => addVariant('example', '.example &'))",
	],
}