DEV Community: Sérgio Junior

Styling faster with Tailwind CSS 🍃

Sérgio Junior — Mon, 31 Jul 2023 19:32:00 +0000

Tailwind emerged in 2017, survived the hype of new technologies and it is now present in many projects and in the standard installation of frameworks, as NextJS. Tailwind makes styling much simpler, faster, and enjoyable.

This blog post was originally posted on my website.

I've become a Tailwind evangelist, so I'd like to share its key features and how I use it in my daily work.

In this blog post, I'll be covering the following topics:

Basic Usage
Utility Classes
Custom Theme
Custom Properties
Media Queries
Element States
!important
Negative Values
First and Last Element
Peer
Nested Elements
@apply
Prefix
Playground

For more information on installation and configuration, please refer to the official Tailwind documentation.

Basic Usage

Tailwind utilizes HTML classes to apply CSS styles. For example, we can define the color, size and line-height of a text as follows with Tailwind.

<p class="text-red-500 text-base">Hello, World!</p>

In contrast, with pure CSS, we would have to create a class and use it in the element.

.text {
    color: red;
    font-size: 12px;
    line-height: 18px;
}

<p class="text">Hello, World!</p>

And with styled-components, we would need to export a component, import it, and use it. Typically, this element would be in a separate file.

export const Text = styled.p`
    color: red;
    font-size: 12px;
    line-height: 18px;
`;

import * as Styles from './styles.js';
// ...
<Styles.Text>Hello, World!</Styles.Text>

As you can see, we can achieve the same result by writing much less code with Tailwind.

Utility Classes

At first, it may take some time to memorize the classes, but they follow a pattern, and over time, it becomes natural. The official documentation provides a list of all classes, but the most commonly used ones are:

w-x - width
h-x - height
p-x - padding
m-x - margin
mb-x - margin-bottom
mt-x - margin-top
ml-x - margin-left
mr-x - margin-right
px-x - padding-left & padding-right
my-x - margin-top & margin-bottom
text-x - font-size & color
leading-x - line-height
bg-x - background-color
rounded - border-radius
flex | block | hidden | grid - display: flex | block | none | grid

Read more in the official documentation

I highly recommend using the VSCode Tailwind CSS IntelliSense extension, which suggests and shows the values of all classes as you type.

Custom Theme

Tailwind comes with a default theme, but you can customize it to meet your project's needs.

To do this, simply create a tailwind.config.js file at the root of your project and define the properties you want to customize.

module.exports = {
  theme: {
    extend: {
      colors: {
        'blue': '#1fb6ff',
        'green': '#13ce66',
        'gray-dark': '#273444',
      },
      spacing: {
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Read more in the official documentation

Custom Properties

The Tailwind theme has a wide range of properties and styles that probably cover your design specifications.

However, if you happen to need a property that does not exist in your theme, you can define a different value using -[x], for example.

<p class="text-[red] text-[100px] w-[50%]">Hello, World!</p>

For properties with spaces, you can use an underscore _ to separate the values.

<p class="w-[calc(100%_+_10px)] shadow-[0_35px_60px_-15px_#333]">Hello, World!</p>

Read more in the official documentation

Media Queries

To use breakpoints, you can use the prefixes sm:, md:, lg:, and xl:.

<p class="text-red-500 sm:text-blue-500 md:text-green-500 lg:text-purple-500 xl:text-yellow-500">Hello, World!</p>

To change the sizes of the breakpoints, simply modify the screens property in the tailwind.config.js file.

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

Read more in the official documentation

Element States

Tailwind also uses prefixes to style an element depending on its state, such as hover:, focus:, active:, and disabled:.

<button class="bg-blue-500 hover:bg-green-500 disabled:bg-slate-600">Click here</button>

Read more in the official documentation

!important

To use the !important property in CSS, simply add the ! prefix before the class.

<p class="!mb-0">Hello, World</p> <!-- margin-bottom: 0 !important; --->

Read more in the official documentation

Negative Values

To use negative values, simply use the - prefix before the class.

<p class="-mb-4">Hello, World</p> <!-- margin-bottom: -1rem; --->

Read more in the official documentation

Nested Elements

To style a child element, simply use the &> prefix inside brackets.

<div class="text-blue-700 hover:[&>.text]:text-red-700 ">
    <p>I'll not be red on hover.</p>
    <p class="text">I'll be red on hover.</p>
</div>

Read more in the official documentation

First and Last Element

Instead of using :last-of-type and :first-of-type selectors to customize the first or last element of a group of sibling elements, you can use the first: and last: prefixes.

<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>

This is very useful in loops.

<ul>
    {#each people as person}
       <li class="mb-10 last:mb-0">...<li>
    {/each}
<ul>

Read more in the official documentation

Peer

To style an element depending on the state of its hierarchical sibling, use the peer class and prefix.

<input type="email" class="peer"/>
<p class="invisible peer-invalid:visible text-pink-600">
    Please provide a valid email address.
</p>

Read more in the official documentation

@apply

Some argue that a disadvantage of Tailwind is that it makes the code less readable by adding so many classes in the HTML.

<p class="text-base text-gray-800 mb-3 last:mb-0">Text 1</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 2</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 3</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 4</p>

While this may be valid, you can use @apply to group classes, reuse them, and make the code more legible.

.my-text-base {
    @apply text-base text-gray-800 mb-3 last:mb-0;
}

<p class="my-text-base">Text 1</p>
<p class="my-text-base">Text 2</p>
<p class="my-text-base">Text 3</p>
<p class="my-text-base">Text 4</p>

Read more in the official documentation

Prefix

If you want to add Tailwind to a project and avoid conflicts with other classes, you can add a tw- prefix to the Tailwind classes.

module.exports = {
  prefix: 'tw-',
}

<p class="tw-text-blue-400">Hello, World!</p>

Read more in the official documentation

Playground

Tailwind has a playground where you can test all these features and more. Just visit the link.

https://play.tailwindcss.com/

Conclusion

Since I started working with Tailwind CSS, I rarely needed to create a new CSS file or rewrite properties to add style to a project.

In case I haven't convinced you to start using TailwindCSS yet, there are another points that I consider important to highlight.

TailwindCSS is light and only adds to the final bundle the classes that you use during the development.
TailwindCSS is easy to set up, customize and start working on any project.
TailwindCSS can be used with other UI solutions, such as UI libraries, preprocessors and CSS-in-JS.

I hope you enjoyed this my blog post. If you have any questions, feel free to ask in the comments section below.

Explaining all React Hooks with examples

Sérgio Junior — Tue, 19 Jan 2021 18:56:49 +0000

React Hooks were released two years ago on React version 16.8. It's not so common to see the usage of all of them but they might be very useful to simplify a feature or improve the performance in our application, so, I'd like to explain and give some examples of usage of all React Hooks.

In this post I'll cover all React Hooks:

useState.
useEffect.
useRef.
useContext.
useReducer.
useMemo.
useCallback.
useDebug.
useLayoutEffect.

useState

The simplest and most used of React Hooks, useState allows you to store any value in a function component, like string, object, array, boolean, number, null.

It has the same functionality of this.state in a React Class Component.

You can define its value by passing a value directly or calling a method that accesses the previous value and returns the new value.

import { useState } from "react";

export default function Component() {
  const [counter, setCounter] = useState(0);
  return (
    <>
      <p>Clicks: {counter}</p>
      <button onClick={() => setCounter((prev) => ++prev)}>Increase 1</button>
    </>
  );
}

useEffect

useEffect allows you to call a method during some moments in the component lifecycle:

On the first render.
When a watched value is updated.
When the component is unmounted.

It's similar to the methods componentDidMount, componentDidUpdate and componentWillUnmount in a Class Component.

import { useEffect } from "react";

export default function Component() {
  const fetchSomething = (params) => {};
  const onResizeScreenHandler = () => {};

  useEffect(() => {
    fetchSomething(filters);
  }, [filters]);

  useEffect(() => {
    document.addEventlistener("resize", onResizeScreenHandler);
    return () => document.removeEventlistener("resize", onResizeScreenHandler);
  }, []);
}

To call the function inside useEffect once, let the second parameter, an array, empty.

useEffect(fn, []);

To observe a value, add it in the second parameter.

useEffect(() {
  // Do something with updated x
}, [x]);

The function that you return will be called when the component is unmounted.

useEffect(() => {
  return () => doSomething();
}, []);

useRef

The useRef hook lets you:

Access an element on the DOM.
Store an immutable value during the component's lifecycle.

Its value is accessed by .current:

const time = useRef(0);
console.log(time.current); // 0;

Accessing an element on the DOM.

import { useRef, useEffect } from "react";

export default function Component() {
  const textRef = useRef(null);
  useEffect(() => {
    if (textRef) {
      const elementWidth = textRef.current.offsetWidth;
    }
  }, [textRef]);

  return <p ref={textRef}>Hello, React Hooks</p>;
}

Delay effect

You can use useRef to create a delay to call a method. For instance, wait x seconds to request something as soon the user finishes typing and not overload your API every time he types on deletes a letter.

import { useRef, useEffect, useRef, useState } from "react";

export default function Form() {
  const [text, setText] = useState("");
  const timeToCallSomething = useRef(null);

  const fetchSomething = () => {
    if (text) {
      // Fetch an API.
    }
  };

  useEffect(() => {
    if (timeToCallSomething.current) {
      clearInterval(timeToCallSomething.current);
    }
    timeToCallSomething.current = setTimeout(fetchSomething, 1000);
    return () => clearInterval(timeToCallSomething.current);
  }, [text]);

  const onChangeHandler = ({ target: { value } }) => {
    setText(value);
  };

  return <input value={text} onChange={onChangeHandler} />;
}

Passing a ref by props

If you want to pass a ref to use in a child component, you need to use the method React.forwardRef in the child component and receive the ref as the second parameter.

import { useRef, useEffect, forwardRef } from "react";

export default function Parent() {
  const childRef = useRef(null);

  return <Text ref={childRef} />;
}

const Text = forwardRef((props, ref) => {
  return <p ref={ref}>Exemplo de texto</p>;
});

useReducer

It's an alternative to the useState hook and works like the reducer in Redux. It watches a pre-defined type and returns a new state depending on that type.

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return (
    <>
      Count: {state}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

useContext

The useContext hook allows you to store and access a value anywhere within its hierarchy. It works like Redux, by the way, I already wrote an article showing how to replace Redux by React Hooks.

It's useful when you often use a value and don't want to pass it to the children components by props.

// hooks/useUserContext.js
import { useContext, createContext } from "react";

// Our context
const UserContext = createContext({ name: "" });

// The main component that receives a value and updates our context.
export function UserContextProvider({ name, children }) {
  return <UserContext.Provider value={name}>{children}</UserContext.Provider>;
}

// A custom hook to get the current value.
export default function useUserContext() {
  return useContext(UserContext);
}

// App.js
import { UserContextProvider } from "~hooks/useUserContext";

export default function App() {
  return (
    <UserContextProvider value="John">
      <YourAppTree />
    </UserContextProvider>
  );
}

// YourAppTree.js
import useUserContext from "~hooks/useUserContext";

export default function YourAppTree() {
  const userName = useUserContext(); // Initially the value will be "" and then John.
  return <p>Hi, {userName}</p>;
}

The next React Hooks, useMemo and useCallback, are commonly used to solve performance issues or improve them in our application.

useMemo

You can use useMemo to save time and processing on the execution of a complex function.

Imagine that you have a function that receives some parameters and does count with them that's expensive to process. What the useMemo hook does is memorize these parameters and the returned value and whenever these parameters are equal again, it will return the previous value, without calculating it.

import { useMemo } from "react";

export default function Component() {
  const value = useMemo(() => {
    // Do something complex with x and y.
  }, [x, y]);
}

useCallback

Before explaining what the useCallback does, I'd like to explain an advanced and important concept in React.

React uses Strict Equality Comparison to compare the props or the observable values in a React Hook. If any of these values are different, it will update our component or call the method inside the React Hook.

And you should know like Patrick does that things aren't so obvious in javascript with non-primitive values.

Primitive values are string, number and boolean. Array, object and function aren't primitives, so, if you compare them, you'll get false:

1 === 1; // true;
"batman" === "batman"; // true;
false === false; // true;

{} === {}; // false;
[] === []; // false;
() => {} === () => {}; //false;

It will only return true if it has the same reference, like a variable:

const fn = () => {};
fn === fn; // true;

So if you pass a function by props, React will update the component every time, even if the props haven't changed, because a function is different from a function.

Therefore we use useCallback to create a unique reference to a function and React knows that it's the same and avoids unnecessary updates.

Its reference only will be different in case the parameters change.

import { useCallback } from "react";

export default function Parent() {
  const onFetchAlwaysHandler = useCallback(() => {
    // Its reference will change when a and b change.
  }, [a, b]);

  const onFetchOnceHandler = useCallback(() => {
    // It will have the same reference.
  }, []);

  return <Approvad onFetchHandler={onFetchHandler} />;
}

Watch out

If you use a function with useCallback as a dependency of useEffect that updates the useCallback parameters, you can cause an infinite loop.

Improving our performance with React.memo

You can use useCallback and React.memo to improve the performance in your application and avoid that the children components update whenever that's an update on the parent component.

function List({ item, onSelect }) {
  return (
    <li>
      <button onClick={onSelect}>Select {item}</button>
    </li>
  );
}

const MemorizedList = React.memo(List);

function App() {
  const onSelectHandler = useCallback((selectedItem) => {
    // Do something with selectedItem.
  }, []);

  return (
    <ul>
      {array.map((e) => (
        <MemorizedList item={e} onSelect={onSelectHandler} />
      ))}
    </ul>
  );
}

useLayoutEffect

The hook useLayoutEffect has the same functionality as useEffect, however, it will execute its function as soon the browser finishes mounting the dom.

You can use this hook to read an element in the DOM or do something when the page loads.

import { useState, useLayoutEffect } from "react";

function Component() {
  const [loadedDOM, setLoadedDOM] = useState(false);

  useLayoutEffect(() => {
    setLoadedDOM(true);
    window.localstorage.getItem("...");
  }, []);
}

SSR

If you're using Server Side Render (NextJS), the React Hooks useLayoutEffect and useEffect won't work because they only run on the client-side. If you try, React will show you a warning on the console.

You can use them to interact with the localstorage which's a feature only in the client, for example.

useDebugValue

The hook useDebugValue can be used to show a label on the React DevTools extension inside a custom hook. It works like a console.log.

import { useDebugValue, useState } from "react";

function useUserStatus() {
  const [isLogged, setIsLogged] = useState(false);

  //...

  useDebugValue(isLogged ? "Logged" : "Not logged");

  return isLogged;
}

useImperativeHandle

The useImperativeHandle hook allows you to customize the ref value in a parent component through its child component. You can pass a DOM element, method, anything and be able to call it from the parent component. It must be used with the React.forwardRef in the child component to receive the ref from the parent component.

import { useImperativeHandle, forwardRef, useEffect, useRef } from "react";

const Input = forwardRef((props, parentRef) => {
  const childRef = useRef();
  const someMethod = () => 1;

  useImperativeHandle(parentRef, () => ({
    focusOnChildInput: () => childRef.current.focus(),
    callChildMethod: someMethod,
  }));
  return <input ref={childRef} />;
});

const Form = () => {
  const ref = useRef();
  useEffect(() => {
    if (ref) {
      ref.current?.callChildMethod?.(); // 1
      ref.current?.focusOnChildInput?.();
    }
  }, []);

  return (
    <form>
      <Input ref={ref} />
    </form>
  );
};

Documentation

That's all, if you want to see more details or read about these React Hooks, please, take a look at the official React documentation.