← All posts

Style Fluent Forms with Tailwind CSS Child Selectors in Oxygen

winden

You can't style a Fluent Forms form in Oxygen Builder the way you style your own elements. The labels, inputs and submit button live inside the plugin's widget, so they don't show up in the structure panel and there's nothing to click and add classes to. In part 2 of our child elements series, we style all of them from the parent div with Tailwind CSS child selectors. We also use the ! important modifier for the cases where Fluent Forms' own CSS wins, so the whole form is styled from one class field.

We recorded this with Winden, which was still called Oxywind back then, and the Tailwind CSS v3.1 docs open in another tab.

Add the Fluent Forms widget

A form that runs the full width of the page looks unfinished. Before styling anything, give it a centered container with a sensible width.

  1. Add a Div and put the Fluent Form widget inside it. In the Structure panel it shows up as Div (#5) → Fluent Form (#4).
  2. Select the div and add these classes to it:
container mx-auto max-w-lg py-16

max-w-lg sets max-width: 32rem (512px), which we checked on the Tailwind Max-Width docs page. On the front end the form now sits in the middle of the page with space above and below.

Edit labels and text color

Fluent Forms uses its own label color. You can't select the labels in Oxygen, so we target them from the parent div. [&_label] means "any label inside this element", and the utility after the colon is applied to those labels.

[&_label]:text-blue-400

We tried text-blue-300 first and then went with 400. Every label in the form (First Name, Last Name, Email, Subject, Your Message) changes at once. Trying another shade means changing one number in the class field.

Font weight and the ! important modifier

This is where most people get stuck: the class is on the element, but nothing changes. We added [&_label]:font-light to make the labels lighter, and the weight stayed the same.

In the browser DevTools you can see why. The rule .fluentform label { font-weight: 600; } comes from the Fluent Forms stylesheet and overrides our Tailwind rule. To make our class win, put ! in front of the utility:

[&_label]:!font-light

The labels turn light right away. Save the ! for cases like this one, where a plugin's CSS is more specific than your utility.

Target inputs by class

Some elements can't be matched by tag name alone, because an input, a textarea and a select are all form controls. Fluent Forms gives each field a class, so you target the class instead. Add a . before the class name inside the brackets:

[&_.ff-el-form-control]:bg-blue-100

Now every field, including the message textarea, has a light blue background. To find a class like ff-el-form-control, inspect the form on the front end in DevTools.

Background color for the submit button

The button is the last piece, and the method is the same. We looked up the button's class, checked the Tailwind Customizing Colors page for a color, and chose indigo:

[&_.ff-btn-submit]:bg-indigo-600

Then add text-white with the same [&_.ff-btn-submit]: prefix so the button text is readable on the dark background.

The finished class list on the parent div:

container mx-auto max-w-lg py-16
[&_label]:text-blue-400
[&_label]:!font-light
[&_.ff-el-form-control]:bg-blue-100
[&_.ff-btn-submit]:bg-indigo-600

The entire form is styled from one element in the builder. We didn't write a stylesheet or hunt for override selectors, and nothing lives outside Oxygen.

Who is this for

  • Oxygen Builder users who put Fluent Forms (or other plugin widgets) on their pages and want the form to match the site design.
  • Tailwind CSS users who don't want a separate CSS file just to override one plugin's styles.
  • Anyone whose Tailwind class isn't applying because a plugin stylesheet beats it: the ! modifier fixes that.

FAQ

How do I style Fluent Forms labels with Tailwind CSS? Add an arbitrary child selector to the element that wraps the form, for example [&_label]:text-blue-400. It applies the utility to every label inside that element.

Why doesn't my Tailwind class change the Fluent Forms font weight? Fluent Forms sets font-weight: 600 on .fluentform label, and that rule wins over the Tailwind utility. Put ! in front of the utility, as in [&_label]:!font-light, to mark it important.

How do I target a class instead of an HTML tag? Put a dot before the class name inside the brackets: [&_.ff-el-form-control]:bg-blue-100 or [&_.ff-btn-submit]:bg-indigo-600.

Do I need to select the form elements in the Oxygen structure panel? No. All the classes go on the parent div. That's why this approach works for plugin widgets whose inner elements you can't select.

Get Winden → dplugins.com

Related posts