upward shot of modernist building

Technical insights - Tailwind - The easy CSS framework

This new styling framework saves time by enabling global styling changes instead of changing multiple styling instances

The previous UI code approach was using a styling framework -"styled components". To style in an HTML document that codes for web content, a Cascading Style Sheet language (CSS) framework is used to describe the presentation of the content, e.g. colour, size, position and more.

This has several disadvantages, especially for a large website that renders the maintenance of the website extremely time consuming, creating a high risk of bugs and is considered outdated by modern front end development standards.

At Littleshovels we use “Tailwind Based Components”- an advanced CSS styling framework, today commonly used for large websites. It is more suitable to work with consistent designs and more efficient for development while it results in easier maintainability due to its clean code structure.


  • Tailwind explained in short

    Tailwind CSS is a utility-first CSS framework that allows developers to build websites more quickly and easily. It provides a set of utility classes that can be directly applied to HTML elements to control their appearance and behavior, eliminating the need to write custom CSS. By using Tailwind CSS, developers can rapidly create custom designs without leaving the HTML or writing extensive CSS code. The framework also offers multiple customization options and configuration capabilities, making it highly versatile and adaptable to different project requirements. Overall, Tailwind CSS streamlines the development process and empowers developers to create scalable and responsive websites efficiently.

  • Best choice for customized design

    Tailwind CSS is often considered the best choice for modern website development due to its utility-first approach and extensive set of pre-built utility classes. This allows developers to rapidly build and customize designs without the need for writing a lot of custom CSS. Furthermore, Tailwind CSS provides a highly flexible and modular system, making it easy to create responsive and scalable websites that meet the demands of modern web development.

Markus spiske GXBF7va C6 L8 unsplash

Advantage of Tailwind based components

  • “Styled-components”

    (old CSS framework)


    1. Standardization and consistent design is difficult, multiple instances for each component
    2. If a design/style update is required, multiple instances have to be updated, resulting in high effort
    3. Investing a lot of time in inventing “class-names”
    4. The CSS code keeps growing with each update
    5. Applying changes can cause bugs, break code
    6. Single style components defined individually

  • “Tailwind Based Components”

    (new CSS framework)


    1. Easily standardise and consistent design, as there is only once source of “truth”
    2. Updates to design can be done globally by changing one instance, e.g. changing all header colours at once
    3. Saves time as “Class-names” are not needed
    4. CSS code stops growing, easy maintainable
    5. Safe to apply changes, lowered risk to break codebase
    6. Can choose styles from predefined design systems, which makes it easier and faster to build visually consistent designs.