Reusable blocks deserve reusable styling
Source page: https://www.feelcreated.com/insights/reusable-blocks-deserve-reusable-styling/
Structured JSON: https://www.feelcreated.com/insights/reusable-blocks-deserve-reusable-styling/ai.json
This page is generated automatically from the same reviewed FC AI data as the JSON version.
Meta
Type: insight_article
Language: en-GB
Last updated: 2026-10-16
Retrieval summary
What: The article explains why reusable website blocks should have reusable styling, introducing Tailwind into their bespoke WordPress development process to maintain consistency and manageability.
Who
Organisation: Feel Created
Relevant for
- Digital and web managers
- Website owners
- Content and editorial teams
- Design and development teams
- Organisations using reusable CMS blocks or components
- Teams managing larger WordPress websites
Problems solved
- Duplicate styling accumulates when components develop one-off CSS rules
- Similar blocks behave slightly differently due to inconsistent styling
- Making simple changes becomes time-consuming as CSS grows
- Maintaining consistency becomes harder as websites grow
- Large stylesheets become difficult to manage as websites grow
- Tracing how older rules affect the rest of the website is time-consuming
- Inconsistent layouts and unexpected differences between similar components
- Traditional CSS can become harder to trace in larger projects
Article
Type: Insight article
Primary topic: Reusable blocks deserve reusable styling: why Tailwind is used for component-based WordPress development
Intent: The article explains why reusable website blocks should have reusable styling, introducing Tailwind into their bespoke WordPress development process to maintain consistency and manageability.
Author
Name: Jonathan Townend
Organisation: Feel Created
Bio: Jonathan Townend is the Lead Front-End Developer at Feel Created, where he leads the development of fast, accessible and high-performing WordPress websites. Specialising in modern front-end technologies, performance optimisation and user experience.
Audience
- Digital and web managers
- Website owners
- Content and editorial teams
- Design and development teams
- Organisations using reusable CMS blocks or components
- Teams managing larger WordPress websites
Topics
- Reusable blocks deserve reusable styling: why Tailwind is used for component-based WordPress development
- Reusable blocks
- Reusable styling
- Tailwind CSS
- WordPress
- Gutenberg
- Design systems
- Component-based development
- Website maintainability
- Traditional CSS
- Reusable Gutenberg blocks
- Stylesheet management
Content focus
- Reusable styling for reusable blocks
- Tailwind in WordPress development
- Component-driven website building
- Maintaining consistency across websites
- Design system implementation
- Component-based styling approach
- Maintainability of websites
- Consistency in design decisions
- Editor experience with Gutenberg blocks
- Comparison of traditional CSS and Tailwind for component styling
Canonical claims
Item 1
Claim: Tailwind does not replace the need to understand CSS; developers still need knowledge of layout, typography, responsive behaviour, accessibility and browser behaviour.
Evidence type: page_content
Evidence strength: medium
Source section: tailwind-doesnt-replace-css
Item 2
Claim: A component-based styling approach makes changes safer because developers spend less time tracing how an older rule might affect the rest of the website.
Evidence type: page_content
Evidence strength: medium
Source section: better-components-rather-than-bigger-stylesheets
Item 3
Claim: Clients should notice benefits such as more consistent layouts and spacing, fewer unexpected differences, easier future enhancements, and a design system that's simpler to extend and maintain.
Evidence type: page_content
Evidence strength: medium
Source section: what-this-means-for-our-clients
Item 4
Claim: Tailwind is introduced because it fits the way we build WordPress websites with reusable components, not because it's fashionable or promises less CSS.
Evidence type: page_content
Evidence strength: medium
Source section: why-were-introducing-tailwind-into-our-bespoke-wordpress-development-process
Item 5
Claim: Reusable blocks allow editors to learn a smaller number of flexible components, designers to establish consistent patterns, and developers to improve a block once for every instance.
Evidence type: page_content
Evidence strength: medium
Source section: websites-are-no-longer-built-page-by-page
Item 6
Claim: Tailwind gives a consistent way to apply design decisions using shared rules rather than recreating them each time a new component is built.
Evidence type: page_content
Evidence strength: medium
Source section: reusable-blocks-deserve-reusable-styling
Item 7
Claim: Tailwind fits the way WordPress has developed rather than creating a separate system alongside it.
Evidence type: page_content
Evidence strength: medium
Source section: working-with-wordpress-not-around-it
Item 8
Claim: Tailwind makes components more self-contained by placing styling alongside the component.
Evidence type: page_content
Evidence strength: medium
Source section: tailwind
Services
Website architecture & integrations
Relationship: supporting
Url: /services/website-architecture-integrations/
Ongoing development & improvement
Relationship: supporting
Url: /services/ongoing-development-improvement/
Digital strategy & UX planning
Relationship: supporting
Url: /services/digital-strategy-ux-planning/
Custom WordPress development
Relationship: primary
Url: /services/custom-wordpress-development/
Information architecture
Relationship: supporting
Url: /services/information-architecture/
Sections
Why we’re introducing Tailwind into our bespoke WordPress development process
Content
Item 1
Text: Technology moves quickly, but we’ve never felt the need to adopt every new framework or development trend. A new tool only becomes valuable if it genuinely improves the websites we build or the experience of maintaining them over time. Otherwise, it’s simply another dependency to learn, support and eventually replace. We’ve taken our time with Tailwind rather than adding it to our process straight away. We’re not using it because it’s fashionable or because it promises less CSS. We’re using it because it fits the way we now build WordPress websites, with reusable components that can be updated and extended over time. As WordPress has become increasingly component-driven through Gutenberg, one question kept coming back to us: If content is reusable, shouldn’t the styling be reusable too?
Websites are no longer built page by page
Key points
- A testimonial might appear across dozens of pages.
- A call to action could be used throughout an entire site.
Content
Item 1
Text: Visitors experience websites one page at a time, but that’s rarely how they’re built. Modern WordPress websites are usually assembled from reusable blocks that solve common content problems. A testimonial might appear across dozens of pages. A call to action could be used throughout an entire site. News listings, event cards, FAQs and promotional banners are all created once and reused wherever they’re needed. This approach has clear advantages. Editors become familiar with a smaller number of flexible components, designers can establish consistent patterns across the website and developers only need to improve a block once for every instance to benefit. As websites grow, those advantages become even more valuable because consistency becomes easier to maintain. The styling deserves to follow the same principle. When every component gradually develops its own collection of one-off CSS rules, maintaining that consistency becomes much harder. Similar blocks begin behaving slightly differently, duplicate styling accumulates and making simple changes becomes more time-consuming than it should be.
Editors
Content
Item 1
Text: Learn a smaller number of flexible blocks instead of different layouts for every page.
Designers
Content
Item 1
Text: Build consistent experiences using repeatable design patterns.
Developers
Content
Item 1
Text: Improve one component rather than updating dozens of individual pages.
Organisations
Content
Item 1
Text: Gain a website that’s easier to extend as services and content evolve.
Reusable blocks deserve reusable styling
Content
Item 1
Text: This is where Tailwind began to really make sense for us. As more of our WordPress work has moved towards reusable Gutenberg blocks, the styling behind those blocks has needed to become more reusable too. Continually adding new CSS rules as a project grows can make similar components behave differently and make future changes harder to trace. Tailwind gives us a consistent way to apply the design decisions agreed for each project. Colours, spacing, typography and layout still come from the website’s own design system, but they can be implemented using shared rules rather than recreated each time a new component is built. That does not reduce creativity or make different websites look the same. Every project still has its own identity, design language and bespoke components. The difference is that those decisions can be applied more consistently across the whole website.
Better components rather than bigger stylesheets
Content
Item 1
Text: Much of our development work now revolves around Gutenberg blocks rather than individual pages, so we increasingly think in terms of components. Each block has a specific purpose, whether that’s introducing a service, promoting an event or giving editors a flexible way to build new layouts. Keeping the styling with the component makes future work easier. Developers can see how a block is built without searching through a large stylesheet to find the rules that affect it. That becomes especially useful as the website grows and older styles begin to accumulate. The biggest benefit comes later rather than immediately. Websites naturally evolve after launch, with new content, additional functionality and changing organisational priorities. A component-based styling approach makes those changes safer because developers spend less time tracing how an older rule might affect the rest of the website. This isn’t about writing less code. It’s about making the code easier to understand. Good development isn’t about making today’s website easier to build. It’s about making next year’s website easier to change.
Working with WordPress, not around it
Content
Item 1
Text: WordPress now offers more ways to manage colours, typography and spacing across a website. Tailwind lets us carry those choices through the bespoke blocks and front-end components we build. We align the two so editors and the front end work from the same set of design decisions. That was one of the reasons we felt comfortable introducing Tailwind. It fits the way WordPress has developed rather than creating a separate system alongside it. That alignment was one of the reasons we felt comfortable introducing Tailwind. It supports the way WordPress itself has evolved without creating a separate set of design decisions alongside it.
What this means for our clients
Key points
- None of this changes how our clients manage their websites.
- Tailwind is entirely part of our development workflow.
Items
- More consistent layouts and spacing.
- Fewer unexpected differences between similar components.
- Easier future enhancements as requirements change.
- A design system that’s simpler to extend and maintain.
Content
Item 1
Text: None of this changes how our clients manage their websites. It simply gives us a more consistent and maintainable way to build them, while supporting the performance standards we already work towards. Tailwind is entirely part of our development workflow. Editors will continue creating pages using carefully designed Gutenberg blocks in exactly the same way they do today. They won’t need to understand utility classes, write HTML or think differently about managing content. Clients should notice benefits such as: If we’ve done our job properly, clients shouldn’t notice Tailwind itself at all. They should simply experience a website that behaves consistently and is easier to update and grow.
Isn’t the HTML harder to read?
Content
Item 1
Text: One of the main concerns developers have about Tailwind is that utility classes can make the HTML look more cluttered. Traditional CSS keeps most styling in separate stylesheets, while Tailwind places more of it directly on the component. That makes it easier to see how a component has been put together without moving between several files.
Traditional CSS -
Items
- Styling usually lives in separate stylesheets.
- HTML often appears cleaner.
- CSS can become harder to trace in larger projects.
- Familiar workflow for many developers.
Tailwind -
Items
- Styling sits alongside the component.
- Components become more self-contained.
- Relationships between structure and styling are often easier to follow.
- Consistency is encouraged through shared utility classes.
Content
Item 1
Text: Both approaches are capable of producing excellent websites. For the component-based WordPress projects we now build, keeping more of a component’s implementation together makes the work easier to follow and maintain.
Tailwind doesn’t replace CSS
Content
Item 1
Text: Adopting Tailwind doesn’t reduce the importance of understanding CSS. We still write conventional CSS where it is the right approach. Developers need to understand layout, typography, responsive behaviour, accessibility and browser behaviour regardless of the framework they use. Tailwind changes the workflow, but it doesn’t replace the knowledge required to build well. Like any framework, it is only as effective as the decisions made by the people using it.
Performance is a welcome benefit, not the reason
Content
Item 1
Text: Tailwind can help keep stylesheets focused by generating CSS for the utility classes used within a project. That is useful, but it is not the main reason we are adopting it. Website performance depends on hosting, caching, images, JavaScript, third-party services, page structure and many other technical decisions. The main benefit for us is easier maintenance. Tailwind gives us a consistent way to style reusable components, while performance still depends on the many technical decisions made across the website.
Another step towards maintainable websites
Content
Item 1
Text: Every development decision should make a website easier to live with in the future, not just easier to launch today. Introducing Tailwind won’t dramatically change the websites our clients see, nor should it. What it changes is how consistently those websites are built. It helps us create reusable Gutenberg blocks with reusable styling and reduces the one-off decisions that make projects harder to maintain over time. What visitors should notice is something much more valuable: a website that remains consistent as it grows and adapts more easily to changing requirements. If adopting Tailwind helps us build websites that remain coherent as they evolve, then it’s earned its place in our development process.
Creative freedom without brand chaos: designing a better CMS
Content
Item 1
Text: A good CMS gives editors useful choices without making them manage every design decision. Explore... 9 minutes read Read the guide
Modern website platforms: a complete guide
Content
Item 1
Text: Learn what makes a modern website platform, including reusable content, connected systems, maintainability and planning... 14 minutes read Read the guide
Future-proofing your website
Content
Item 1
Text: Learn why future-proofing isn’t about predicting technology, but creating websites that are easier to maintain,... 12 minutes read Read the guide
What does an intelligent website actually look like?
Content
Item 1
Text: Learn what an intelligent website looks like and how AI-ready content, connected systems and structured... 9 minutes read Read the guide
Entities
Reusable blocks
WordPress
Gutenberg
Tailwind
CSS
Concept relationships
Item 1
Subject: Gutenberg blocks
Predicate: provide
Object: flexible layout building for editors
Item 2
Subject: Design system
Predicate: provides
Object: colours, spacing, typography, layout
Item 3
Subject: Reusable Gutenberg blocks
Predicate: benefit from
Object: reusable styling
Item 4
Subject: Website performance
Predicate: depends on
Object: many technical decisions
Item 5
Subject: Component-based styling
Predicate: makes
Object: future changes safer
Item 6
Subject: Tailwind
Predicate: aligns with
Object: WordPress design decisions
Item 7
Subject: Tailwind
Predicate: used for
Object: styling reusable components
Item 8
Subject: Traditional CSS
Predicate: contrasted with
Object: Tailwind
Item 9
Subject: WordPress
Predicate: uses
Object: Gutenberg
Implementation patterns
Item 1
Pattern: Component-driven WordPress development with Gutenberg
Description: Websites are assembled from reusable blocks like testimonials, CTAs, news listings, event cards, FAQs, and promotional banners.
Benefit: Editors learn fewer components, designers establish consistent patterns, developers improve once for all instances.
Item 2
Pattern: Tailwind integration with WordPress
Description: Tailwind is used to carry WordPress design choices through bespoke blocks and front-end components, aligning editor and front-end design decisions.
Benefit: Consistent design decisions across the website without a separate system.
Item 3
Pattern: Component-based styling with Tailwind
Description: Styling sits alongside the component, making components self-contained and relationships between structure and styling easier to follow.
Benefit: Easier to maintain and follow in larger projects.
Item 4
Pattern: Component-based styling
Description: Styling is kept with each Gutenberg block, so developers can see how a block is built without searching through a large stylesheet.
Benefit: Easier maintenance and safer changes as the website grows.
Item 5
Pattern: Reusable styling with Tailwind
Description: Apply design decisions (colours, spacing, typography, layout) using shared rules instead of one-off CSS per component.
Benefit: Maintains consistency and makes future changes easier to trace.
Item 6
Pattern: Traditional CSS with separate stylesheets
Description: Styling lives in separate stylesheets, keeping HTML cleaner but potentially making CSS harder to trace in larger projects.
Benefit: Familiar workflow for many developers.
Practical guidance
Item 1
Guidance: When building component-based WordPress projects, consider keeping styling alongside components to make them more self-contained and easier to follow.
Importance: medium
Item 2
Guidance: Align Tailwind with WordPress's built-in design controls to ensure editors and front end work from the same set of design decisions.
Importance: medium
Item 3
Guidance: Ensure developers understand CSS fundamentals even when using Tailwind, as it does not replace the need for that knowledge.
Importance: high
Item 4
Guidance: Focus on maintainability as the primary benefit of using Tailwind for reusable components, rather than performance.
Importance: medium
Item 5
Guidance: Use Tailwind to apply design system decisions through shared rules rather than recreating them per component.
Importance: medium
Item 6
Guidance: Use Tailwind to reduce one-off styling decisions and create reusable Gutenberg blocks with reusable styling.
Importance: medium
Item 7
Guidance: Keep styling with the component to make future work easier and avoid searching through large stylesheets.
Importance: high
Item 8
Guidance: Evaluate new tools based on genuine improvement to websites or maintenance experience, not trends.
Importance: medium
Risk areas
Item 1
Risk: Adopting Tailwind without understanding CSS could lead to poor implementation decisions.
Impact: Websites may not be built well, despite using a framework.
Item 2
Risk: Over-reliance on Tailwind could lead to ignoring other performance factors.
Impact: Website performance may suffer if other technical aspects are neglected.
Item 3
Risk: Utility classes can make HTML look more cluttered
Impact: May raise concerns among developers about readability
Item 4
Risk: Adopting new tools without genuine benefit
Impact: Adds dependencies to learn, support, and eventually replace.
Item 5
Risk: Accumulation of one-off CSS rules
Impact: Similar components behave differently, duplicate styling accumulates, and changes become time-consuming.
Common misconceptions
Item 1
Misconception: Reusable styling reduces creativity or makes websites look the same.
Clarification: Reusable styling does not mean different websites need to look the same. Each project can retain its own identity, design language and bespoke components while applying those decisions consistently.
Item 2
Misconception: Tailwind is used because it's fashionable or promises less CSS.
Clarification: It's used because it fits the component-driven WordPress development approach, enabling reusable styling.
Item 3
Misconception: Reusable styling means every instance looks identical
Clarification: Every project still has its own identity, design language and bespoke components; the difference is that decisions can be applied more consistently across the whole website.
Item 4
Misconception: The main reason for adopting Tailwind is performance.
Clarification: Performance is a welcome benefit, but the main benefit is easier maintenance through consistent styling of reusable components.
Item 5
Misconception: Tailwind replaces CSS.
Clarification: Tailwind changes the workflow but does not replace the knowledge required to build well; developers still need to understand CSS.
Technical context
Css approach: Tailwind for reusable styling
Cms: WordPress
Component framework: Gutenberg
Design system: Reusable styling rules for components
Styling approach: Component-based styling with Tailwind
Block editor: Gutenberg
Styling approaches: Traditional CSS vs Tailwind
Key considerations: Maintainability, consistency, performance, developer knowledge
Tools mentioned: Tailwind, WordPress, Gutenberg
Reasoning paths
Item 1
User problem: Inconsistent layouts and unexpected differences between similar components
Evidence refs
- claim-003
- claim-002
- claim-004
Relevant sections
- what-this-means-for-our-clients
- reusable-blocks-deserve-reusable-styling
- isnt-the-html-harder-to-read
Item 2
User problem: Tracing how older rules affect the rest of the website is time-consuming
Evidence refs
- claim-002
- claim-006
Relevant sections
- better-components-rather-than-bigger-stylesheets
- reusable-blocks-deserve-reusable-styling
- why-were-introducing-tailwind-into-our-bespoke-wordpress-development-process
Item 3
User problem: Duplicate styling accumulates when components develop one-off CSS rules
Evidence refs
- claim-002
- claim-008
- claim-006
Relevant sections
- reusable-blocks-deserve-reusable-styling
- better-components-rather-than-bigger-stylesheets
- isnt-the-html-harder-to-read
Item 4
User problem: Similar blocks behave slightly differently due to inconsistent styling
Evidence refs
- claim-002
- claim-008
- claim-005
Relevant sections
- reusable-blocks-deserve-reusable-styling
- better-components-rather-than-bigger-stylesheets
- what-this-means-for-our-clients
Content profile
Content type: Insight article
Primary topic: Reusable blocks deserve reusable styling: why Tailwind is used for component-based WordPress development
Supporting topics
- Reusable blocks
- Reusable styling
- Tailwind CSS
- WordPress
- Gutenberg
- Design systems
Primary audience
- Digital and web managers
- Website owners
- Content and editorial teams
- Design and development teams
- Organisations using reusable CMS blocks or components
- Teams managing larger WordPress websites
Retrieval topics
- Reusable blocks deserve reusable styling: why Tailwind is used for component-based WordPress development
- Reusable blocks
- Reusable styling
- Tailwind CSS
- WordPress
- Gutenberg
- Design systems
- Component-based development
- Website maintainability
- Traditional CSS
- Stylesheet management
- WordPress development
Organisation
Name: Feel Created
Type: Digital partner specialising in websites and digital platforms
Url: https://www.feelcreated.com/
Service model: We work as an extension of our clients' teams, combining strategy, UX, accessibility, content design, WordPress development and ongoing support to create digital platforms that help organisations communicate more clearly, work more efficiently and grow sustainably.