![LR Logo](/assets/images/open-graph/og-cover-trans.png)

Website development has changed a lot over my lifetime and career. I think like most people my age I made my first websites in notepad (yes the free tool that comes with Windows!) and WYSIWYG (What You See Is What You Get) tools like [Microsoft FrontPage](https://en.wikipedia.org/wiki/Microsoft_FrontPage) and [HoTMetaL Pro](http://www.hotmetalpro.com/). 

> Fun Fact: The first website I was ever paid to build was made using HoTMetaL Pro in the 90's!

Actually thinking back Microsoft even merged FrontPage technology into Microsoft Word and you used to be able to make websites in Word! Wild times I'd forgotten all about that era! 

When I was building the very early sites especially those built in notepad, CSS didn't even exist if I recall correctly. We used inline styles for everything. Then CSS came along and it was fine but over the years as new CSS versions came and browsers advanced it's all gotten more than a little bit complicated to say the least. 

I've never gotten on with frameworks for styling. I used to fight with Bootstrap back in the day until eventually I decided it was much easier and quicker to just write all my own styles, building for mobile first and then overriding at various breakpoints via `@media` queries.

More recently as I've been building my websites with React I've fallen in love with a technology called [styled-components](https://styled-components.com/) which is a popular CSS-in-JS (CSS written in JavaScript) solution. I've used this for a number of projects and whilst it's been a nice developer experience and also very flexible it does come with it's own issues. The libraries add a fair bit of bloat and there are also well known issues such as the loading flicker you see on some websites now. 

Traditionally you'd load all your styles first before rending the page so that the page would be rendered with the correct styles applied. Websites load JavaScript last so if you're using it to style your pages then you're going to see pages loading without the correct styles until the JavaScript catches up.

But even with the issues that CSS-in-JS brings, styled-components have been my favourite way to work for quite some time now.

But now there's a new kid in town. Tailwind CSS.

Tailwind CSS has completely changed how I think about styling AGAIN! On first glance I really wasn't impressed as it looked like a definite step backways. It brought back all those old memories of inline styles. The very thing the industry has moved away from over the last decade or so and taught us is the work of the devil. It also invoked the terrible memories of fighting with the Bootstrap framework. But it's gaining popularity in the industry and design tools like Figma will give you Tailwind classes so you can build the designs and end up with a website that matches 1:1.

So I decided to give it a try and wow am I glad I did.

Let's demonstrate the two approaches by styling a form component.

## Method 1: Styled Components

When building components that I will style with `styled-components` I like to create two files. One for the component code and markup, and another for the styles. Here is the <ContactFormSC> component that will be placed into a web page. 

** Note: I've named it ContactFormSC to denote styled-component. **

`~/src/components/styled-components/contact-form/contact-form.tsx`

```javascript
import type { FC } from "react";

import { 
    ContactFormStyled,
    HeaderOneStyled,
    LabelStyled,
    InputStyled,
    TextAreaStyled,
    ButtonStyled
} from "./contact-form.styled";

const ContactFormSC: FC = () => <ContactFormStyled>
    <HeaderOneStyled row="1">Styled-Components Form</HeaderOneStyled>

    <LabelStyled row="2" placeholder="name">Name:</LabelStyled>
    <InputStyled row="2" />

    <LabelStyled row="3">Email:</LabelStyled>
    <InputStyled row="3" />

    <LabelStyled row="4">Phone:</LabelStyled>
    <InputStyled row="4" />

    <LabelStyled row="5">Message:</LabelStyled>
    <TextAreaStyled row="5"></TextAreaStyled>

    <ButtonStyled row="6">Send</ButtonStyled>
</ContactFormStyled>

export default ContactFormSC
```

This component is importing various styles from the `contact-form.styled` file which I will show below. 

`<ContactFormStyled>` returns a HTML `<form>` with styles applied.

`<HeaderOneStyled>` returns a HTML `<h1>` with styles applied.

`<LabelStyled>` returns a HTML `<label>` with styles applied.

`<InputStyled>` returns a HTML `<input>` with styles applied.

`<TextAreaStyled>` returns a HTML `<textarea>` with styles applied.

`<ButtonStyled>` returns a HTML `<button>` with styles applied.

You will notice each of the elements contained inside the form accept a prop called `row`. This prop is picked up in the styles and used to determine which grid-row the element should be assigned to.

`~/src/components/styled-components/contact-form/contact-form.styled.tsx`

```javascript
import styled from "styled-components";

interface FormComponentProps {
    row: string // used to control the grid row
}

const ContactFormStyled = styled.form`
    display: grid;
    background-color: gray;
    color: black;
    border: white 2px solid;
    border-radius: .5rem;
    grid-template-rows: repeat(7, minmax(0, 1fr));
    padding: 1rem 2rem;
`

const HeaderOneStyled = styled.h1<FormComponentProps>`
    font-size: 2.5rem;
    justify-self: center;
    grid-row: ${ (props) => props.row };
    grid-column: 1 / span 2;
    margin-bottom: 2rem;
    text-transform: uppercase;
`

const LabelStyled = styled.label<FormComponentProps>`
    font-size: 1.1rem;
    grid-row: ${ (props) => props.row };
    margin-right: 1rem;
`

const InputStyled = styled.input<FormComponentProps>`
    border-radius: .25rem;
    color: black;
    padding: .5rem;
    grid-row: ${ (props) => props.row };
    height: 2rem;
`

const TextAreaStyled = styled.textarea<FormComponentProps>`
    border-radius: .25rem;
    color: black;
    padding: .5rem;
    grid-row: ${ (props) => props.row } / span 2;
    height: 8rem;
`

const ButtonStyled = styled.button<FormComponentProps>`
    background-color: blue;
    border-radius: .25rem;
    color: white;
    grid-column: span 2;
    height: 3rem;
    margin-top: 1.5rem;

    :hover {
        background-color: #0c0cef;
        cursor: pointer
    }
`

export {
    ContactFormStyled,
    HeaderOneStyled,
    LabelStyled,
    InputStyled,
    TextAreaStyled,
    ButtonStyled
}
```

I do love this way of working as it does make the code very easy to reason about. We can quickly and easily create re-usable styles in this way as you see with `LabelStyled` and `InputStyled` above. VSCode and JetBrains IDEs also have plugins for styled-components so that syntax highlighting and auto-complete works as if you were writing standard CSS in a regular `.css` file. But it's slightly better than that because if you look at `grid-row` you can see we can even access the props that were passed in. You can use any TypeScript/JavaScript expressions you like in here so it makes it very easy to customise styles based on the code and state contained in your app!  

Finally this is how you would use your `<ContactFormSC>` component in page. For bonus points I defined some styles for the `<main>` component of the page to use to demonstrate how you can do them in a single file.

`~/src/pages/styled-components.tsx`

```javascript
import { type NextPage } from "next";
import styled from "styled-components";
import ContactFormSC from "~/components/styled-components/contact-form/contact-form";

const Home: NextPage = () => {

  const MainStyled = styled.main`
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to bottom, red, darkblue);
  `

  return (
    <MainStyled>
        <ContactFormSC />
    </MainStyled>
  );
};

export default Home;
```

## Method 2: Tailwind CSS

With Tailwind the `<ContactFormTW>` component both the component definition and the styles live together in a single file.

`~/src/components/tailwind/contact-form/contact-form.tsx`

```javascript
import type { FC } from "react";

const ContactFormTW: FC = () => {
    return <form className="grid border-white border-2  grid-rows-7 rounded-lg shadow-2xl bg-blue-400 py-4 px-8">
        <h1 className="col-span-2 text-black text-4xl mb-8 justify-self-center py-4 font-sans uppercase">
            Tailwind CSS Form
        </h1>

        <label>Name:</label>
        <input className="h-8 rounded px-2 mb-6" />

        <label>Email:</label>
        <input className="h-8 rounded px-2 mb-6"/>
        
        <label>Phone:</label>
        <input className="h-8 rounded px-2 mb-6"/>

        <label className="pr-4">Message:</label>
        <textarea className="h-20 row-span-2 rounded px-2 self-center"/>
        
        <button onClick={sayHello} className="col-span-2 bg-blue-600 rounded-md h-10 mt-6 hover:h-10 text-white hover:bg-blue-500 hover:text-white" >
            Send
        </button>
    </form>
}

export default ContactFormTW
```

`~/src/pages/tailwind.tsx`

```javascript
import { type NextPage } from "next";
import ContactFormTW from "~/components/tailwind/contact-form/contact-form";

const Home: NextPage = () => {
  return (
    <>
      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[yellow] to-[darkblue]">
          <ContactFormTW />
      </main>
    </>
  );
};

export default Home;
```

I know what you're thinking. You're thinking what I did. This looks worse. Where is the separation of concerns? Look at that duplication. This looks harder to understand than the styled-components example. 

But it's fine honestly. It's better than fine. It's like a zen-mode for styling. Allow me to explain.

Let's take the `Name`, `Email` and `Phone` labels and input boxes.

```javascript
<label>Name:</label>
<input className="h-8 rounded px-2 mb-6" />

<label>Email:</label>
<input className="h-8 rounded px-2 mb-6"/>

<label>Phone:</label>
<input className="h-8 rounded px-2 mb-6"/>
```

Here we have duplicated the classes 3 times. We've duplicated the following: 

* `h-8` (height: 2rem)
* `rounded` (border-radius: 0.25rem)
* `px-2` (padding-left: .5rem, padding-right: .5rem)
* `mb-6` (margin-bottom: 1.5rem)

If I couldn't live with this duplication and trust me I used to be a "duplication is a bug" type of guy, I could easily create another re-usable component something like this:

```javascript
import type { FC } from "react";

const Input: FC = () => <input className="h-8 rounded px-2 mb-6" />

export default Input
```

We could then use this in our `<ContactFormTS>` component. But seems like more trouble than it's worth. It took seconds to write it the first time and live with the duplication. I didn't have to think about anything. All those values are worked out for me by Tailwind. I can literally just type `h-2` and see how it looks in the browser. Then tweak the number and it will just update in real time.  No extra files to think about. No imports. Just quick styling.

All of those values have been worked out and standardised for us by Tailwind. Designers know them or at least design tools like Figma do.

If you break a component down into two halves it makes even more sense why this approach is good. 

Let's add some psuedo-code to our form. 

```javascript
import type { FC } from "react";

const ContactFormTW: FC = () => {

    const msg = "Hello World!";

    const sayHello = () => {
        alert(msg);
    }

    return <form className="grid border-white border-2  grid-rows-7 rounded-lg shadow-2xl bg-blue-400 py-4 px-8">
        <h1 className="col-span-2 text-black text-4xl mb-8 justify-self-center py-4 font-sans uppercase">
            Tailwind CSS Form
        </h1>

        <label>Name:</label>
        <input className="h-8 rounded px-2 mb-6" />

        <label>Email:</label>
        <input className="h-8 rounded px-2 mb-6"/>
        
        <label>Phone:</label>
        <input className="h-8 rounded px-2 mb-6"/>

        <label className="pr-4">Message:</label>
        <textarea className="h-20 row-span-2 rounded px-2 self-center"/>
        
        <button onClick={sayHello} className="col-span-2 bg-blue-600 rounded-md h-10 mt-6 hover:h-10 text-white hover:bg-blue-500 hover:text-white" >
            Send
        </button>
    </form>
}

export default ContactFormTW
```

Looking at that code now you can see there is two distinct halves of a component. The first half is for logic and state etc. The bottom half is for rendering. That's where the styling code goes to control how the component renders.

So it doesn't matter that we repeat anything and while it might look like inline styles they aren't. These are standardised styling rules that are the same across the entire application. And if that wasn't good enough I've already explained how you can just take any part of the larger component and break it out and encapsulate a part of it into another smaller component so you can remove the duplication if you really must!

Honestly I implore you to try Tailwind. It's my new favourite way to style web apps and I don't think I'll be using anything else after this. 

Once again I've uploaded the code to GitHub so you can download it and play. However I have noticed some strange behaviour in the browser on refreshes which I assume must be something to do with having both Tailwind and styled-components installed into the same project!

Have fun :)

You can download the source code for this post

TAILWIND CSS

Did you enjoy this post?️

You Might Also Like

My Apprentice

COUNTDOWN