CSS Styling with Component Styles

Component Styles are available in Pinegrow 8 and up.

This guide covers styling with Component Styles where Tailwind is used to generate regular CSS stylesheets with rules such as h1 { color: red; } or .my-class { display: block; margin: 0; }. We will refer to this approach as TWCSS.

The guide does not talk about normal Tailwind CSS usage with Tailwind utility classes added directly to HTML elements, for example <h1 class=“text-lg lg:text-7x text-red-500…”>

Will TWCSS replace normal CSS styling in Pinegrow (the Style panel, SASS, stylesheet editing…)?

No. All CSS editing features remain core features of Pinegrow. TWCSS is offered as an alternative that might be simpler to use.

How does TWCSS work?

In the first step, we add Tailwind classes directly to HTML elements just as with regular Tailwind styling. This is similar to inline CSS styling where CSS properties are added to the style HTML attribute.

Styling is done with Properties panel with either Visual controls or Class Tree. We can also edit the code manually, or paste components from various Tailwind UI libraries.

Once we are happy with the result, we use the Create new style in the Properties panel to transfer the classes from the HTML element to the new Component style.

Each Component style has a selector, such as h1 or .button that determines which HTML elements are affected by the style. This is similar to how normal CSS rules target elements.

But, there is one important difference: Component styles can contain styling for multiple screen sizes, variants (pseudo states) and even sub-elements. Each Component style can compile into a group of CSS rules, enclosed in various @media queries.

This makes Component styles easy to manage – all styling declarations of a component such as button are nicely tucked under one style.

Pinegrow uses the built-in Tailwind CSS compiler to automatically compile the full stylesheet that contains Tailwind base styling, CSS variables, any used utility classes and CSS rules for our Component styles. This happens very quickly, on every styling change.

To see TWCSS in action check out the Tailwind Bunny tutorial.

What are the benefits of TWCSS compared to normal CSS styling?

TWCSS comes with a comprehensive theme where all colors, fonts, spacings are nicely defined and can be extended as needed. The theme can be easily managed in the Design panel.

All TWCSS styling happens in the Properties panel. There is no need to switch between Properties and the Style panel.

TWCSS styling is done with powerful Tailwind visual editing tools such as Visual controls, Class tree and CSS Grid editor.

Responsive styling is much easier with Tailwind than with normal CSS. There is no need to create and manage breakpoints, to have a bunch of CSS rules for a single element under different @media queries.

In addition, Tailwind offers first rate support for variants (pseudo states), including custom variants that target sub-elements by selectors. Visual controls and Class tree fully support working with these variants. With normal CSS styling we have to create and maintain a separate CSS rule for each pseudo state.

The new Style manager panel keep all styles neatly organized and fully editable. Just click on any class to change its value, drag styles to reorder them, instantly search styles and properties.

Are there any limitations of TWCSS? Is it suitable for any project?

TWCSS is not that suitable for styling projects that already use some kind of framework or theming system. For example, to use TWCSS to add additional styling to a project that uses Bootstrap, we would have to transfer colors, spacing values and any other settings from Bootstrap theme to the TWCSS theme. While this is not impossible it does create some extra work. (Please note, we are not talking about converting Bootstrap classes to TWCSS, rather just overriding styling with additional CSS rules).

TWCSS styles are compiled into a single stylesheet. It is not possible to separate compiled CSS into multiple stylesheets, for example one for each block or component. We could explore supporting this if needed.

For dynamic web apps that use components based on React, Vue and similar frameworks it is better to just use normal Tailwind CSS styling – after all Tailwind was designed for such use cases.

TWCSS only works with the built-in Tailwind compiler. External build process is not supported at the moment.

Can Tailwind preflight (base / reset styles) be disabled?

Yes. Use Tailwind compiler settings in the Design panel to toggle preflight.

How can I add a CSS property that is not included in Tailwind?

Tailwind supports custom CSS properties – just enter the class in format [prop:value], for example [grid-area:header]. Such classes can be combined with Tailwind variants (for example md:[grid-area:header]) and added to styles.

What are Class styles? 

Class styles are Pinegrow’s legacy way of managed Tailwind styles. There, classes are always applied directly on element class attributes. Pinegrow keeps track of what style each element uses and then it updates elements class attribute on the fly.

When should we use Class styles and when Component styles?

Class styles are great for creating self contained HTML blocks and components that do not require any external stylesheet. This usage is closer to the spirit of Tailwind but it assumes that you have full control over how HTML elements are rendered (for example, CMS output can not be styled with this approach).

Where are Component styles stored?

Class styles and Component styles are stored in project.pgml file at the root of the project folder. The same file contains Design panel designs and other project information. The format is based on HTML so that the file can be easily placed under versioning control and edited in any code editor if needed.

Tailwind docs say that using Tailwind in the way TWCSS uses it is against best practices!

Tailwind CSS is designed for component based development with React, Vue, Svelte and similar frameworks. There, each component is defined in one place and then reused throughout the project. So, it is easy to keep all Tailwind utility classes directly on HTML elements. To change a button, we just update the button component and rebuild the project.

Pinegrow, on the other hand, is mostly used for static HTML projects and for WordPress themes and blocks. There, we often do not use reusable components (although Pinegrow’s Components can be used there in combination with Tailwind), or we do not control the HTML layout.

Some developers also simply do not like having utility classes spread all over the HTML and prefer classic CSS selector-based styling. TWCSS lets them enjoy best of both worlds.

TWCSS is not better than CSS! I’m super quick with coding CSS.

Here, we are discussing how TWCSS can improve the visual styling workflow, not that TWCSS is better than CSS in absolute terms. The correct choice of technology always depends on unique needs of each project and team.

TWCSS and Pinegrow in general are suited for developers who appreciate using visual tools, alongside or instead of code editing. 

Many – even very experienced – developers struggle with CSS. TWCSS can be easier to use than plain CSS while keeping all the flexibility and power of CSS.