Introduction to Tailwind CSS

Tailwind classes usually contain a single CSS property value.

For example, text-center class is defined as:

.text-center {
    text-align: center;
}

We then style elements by assigning appropriate Tailwind classes, instead of using CSS directly, for example:

<p class="mt-3 text-lg leading-7 text-gray-500">...</p>

Take a look at how styling works in Tailwind Visual Editor – instead of manually coding (or copy pasting) classes we can use visual controls:

You might ask, isn’t this approach with classes that map to single CSS property value similar to using inline CSS styles?

<p style="margin-top:12px;line-height:1.25;color:#888;">...</p>

It is. The idea behind Tailwind is to make styling as simple as using direct inline styles – with these important benefits:

Theming

Spacings, colors and other values are encoded in definitions of the classes. So, if we decide to change a color, we just need to update the theme and not change hard-coded color values throughout our project.

Tailwind Visual Editor doesn’t have any tools for visually customizing your Tailwind CSS build, at the moment. Instead, just use your normal customization process outside of Pinegrow.

Once you customize your theme you can adjust visual controls so that you can use visual editing even with your custom values.

Responsivness

All Tailwind classes come in responsive variants, for example:

• text-left
• sm:text-left
• md:text-left
• lg:text-left
• xl:text-left

By assigning responsive classes to the elements we set how they look on different device sizes without having to deal with complexities of media queries.

Take a look at how to create responsive designs with Tailwind Visual Editor:

Pseudo classes

Classes can also have pseudo variants that define the style of elements in pseudo states like hover and focus, for example hover:text-left.

Pseudo classes and responsive sizes can be combined, for example md:hover:text-left centers text on medium size & up when the element is in hover state.

Here is how that looks in Tailwind Visual Editor:

Note that not all Tailwind classes have their pseudo class variants. Which ones are set can be customized in the Tailwind build process, outside of Pinegrow.

Managing classes

The result of this approach is that elements have long lists of Tailwind classes. A button can easily have 10 or 20 classes.

<button class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1" type="button">
    Send Message
</button>

So what happens when we want to change the design of a button, for example change the padding from p-8 to p-10?

To do that we would have to find all buttons in our project and remove p-8 class and add p-10 class for every single one.

That’s not fun, right?

Well, the idea is that we use Tailwind classes to define components (for example React components) and then use these components in the project. So when we need to change the button we just update the component where the button is defined.

This strategy works with dynamic web apps, but what about static HTML projects or web app prototypes?

Pinegrow Web Editor offers two solutions:

Reusable components

One is defining components in the Actions panel. These components can also have editable areas and all instances in the project are updated when a component is changed.

Class styles

Another solution are new Class Styles that were developed specifically for Tailwind. Class Styles let us group a set of classes into a style that we then assign to other elements in the project.

This makes Tailwind CSS suitable for pure HTML projects, including static websites, server-side apps, prototypes and WordPress themes.

Learn more about Class Styles.

Customization

Another strength of Tailwind CSS is customization. Colors, fonts, spacings, the set of supported pseudo classes and other parameters can be fully customized. At the moment the customization process has to be done outside of Pinegrow with standard Tailwind CSS customization process.

Use Customize visual controls feature to adjust visual controls to your custom Tailwind CSS theme.

This brings us to another important point – although Tailwind CSS can be used by including a pre-build CDN-hosted CSS stylesheet, the recommended approach is setting up a local build process that builds the stylesheet that is tailor-made for our project. This results in minimal file size and customized theme.

Tailwind Visual Editor works with whatever approach we use – be it including a CDN stylesheet, using PostCSS or any other build tool.

We prepared a detailed step-by-step guide on how to setup and customize Tailwind CSS themes.

Learning more

In this documentation, we’ll focus on covering features of Tailwind Visual Editor, not on the Tailwind CSS itself. Please consult the Tailwind CSS documentation for that.