Tailwind CSS

That title should be TailwindCSS all one word, but I felt putting the title as a single word would confuse everybody. Anyway, what’s this all about:

TailwindCSS is a truly awesome library for front end web developers like me. Working with CSS over the last 10 years, we have seen so many different flavours for managing CSS within the HTML landscape. Processes and standards like BEM (Block Element Modifiers) have helped but have still increased the size of the payload when put onto the web client. Minimisation can only do so much and typically as applications get bigger, so does the CSS library.

So what is TailwindCSS?

Well, it’s a library that provides massive amounts of customisation without compromising or, and this is the big one, without increasing the size of the payload. Further it reduces the complexity of the build pipeline as most of the CSS is already precreated.

There are many component libraries around that try to shorten the workload on the front-end developer like Bootstrap and Foundation. However, these libraries typically are quite large and bloat the application client if you don’t use all the functions or methods in the CSS. ?SASS can help reduce this but that puts a lot of effort of the part of the developer.

Tailwind's Approach

TailwindCSS takes a completely different approach to providing CSS to the front-end client. For the developer the workload doesn’t require creating lots of custom CSS code followed by 100’s of important! modifiers everywhere. Instead, is uses classes that support virtually all the types of CSS options that a developer would need to build an application. Obviously there are some unique customisations that may need some CSS additions but these are the exception not the rule. ?

So how does it work? Well, the developer simply adds CSS tags to the class attribute for the html element. ?Here is an example:

<div class="flex flex-row">
  <div class="basis-1/4">01</div>
  <div class="basis-1/4">02</div>
  <div class="basis-1/2">03</div>
</div>        

The code snippet shows a flexbox grid layout.? This might not look too surprising to the bootstrapper's out there, it’s a typical layout. However, where TailwindCSS wins the day is its granularity, we can add so many variations. We can create components and set the colours easily with theming functions provided by tailwind’s configuration file and fully customise a standalone component for reuse with 100’s of class attributes. These will customise the layout, look and feel, typography and so much more.? Front end libraries like React help with this too, with their effortless support for component creation using JSX files where the CSS is easily embedded.

React, JSX and TailwindCSS

Here is an example of a React JSX file we have recently created for our Health care application, Nova. This code uses TailwindCSS extensively to style the components and make the maintenance easier.

return <div className='grow max-h-full overflow-hidden flex flex-col' >
        <Title title={ 'Client: ' + client.fullName } backUrl={ `/clients/${ id }/logging` } />
        <div className="grid grid-cols-3 gap-1 p-2    items-start max-h-full overflow-y-scroll">
            { options }
        </div>
        <div className='flex flex-1 flex-col p-2 justify-start items-start bg-primary text-center '>
            <span className='my-2 text-white text-2xl  '>Time eaten</span>
            <Calendar value={ time } onChange={ (e) => setTime(e.value) } timeOnly className='rounded-sm w-full' />
            <span className='mt-1 text-white text-2xl'>Type food name here ...</span>
            <InputText className='w-full rounded-lg' value={ value } onChange={ (e) => setValue(e.target.value) } onKeyDown={ (e) => setFoodItem(e) } />
            { foodItemsContainer }
        </div>
        <button className='bg-secondary  mt-1 text-white hover:bg-primary-500 items-center border border-primary rounded-lg p-2 overflow-hidden  shadow-xl'>
            Add Meal
        </button>
    </div >
        

If you look closely you will see the “text-white text-2xl” tags and the ?“bg-secondary” ?these are all baselined in the configuration file for tailwind and make life easy for customisation when using typical 3 colour theming.

Although the code itself is complex you can see the ClassName=”XXXXXXXX” text all throughout the HTML.? Admittedly this does add to the html code size. However, it reduces the complexity of CSS within the application, and any good front end developer out there will know how difficult it can be to debug a CSS issue. What I love about TailwindCSS, is when combined with a good front end library like React, you can do so many powerful things when creating components. This library offers so much flexibility to style up applications that look pleasing on the eye, whilst making maintenance easier.

There is a whole load of information on Tailwind’s website I recommend you take a look and have a play. It doesn’t take long to get to speed with it, and its automatically added as part of your React or Angular build when creating an application using the CLI.

References

1.?????? TailwindCSS , https://tailwindcss.com/

2.?????? React, https://react.dev/learn

About Me

Thank you for reading this blog article. I am Matthew Parton, I am a Front end web specialist working with React/Angular my preference is React for simplicity however I have worked with angular for many years. I have been developing web applications for well over 20 years and all the flavours. I now build cloud enabled front end applications for web and mobile, fully deployed into Kubernetes environments running on linux based docker containers in AWS or Azure. ?

If you want some help with your application or your teams then feel free to contact me using [email protected] or calling me on 07854131382