Skip to main content

Why TailwindCSS

Summary

TailwindCSS allows us to;

  • write CSS in a consistent way
  • be fast at styling
  • own our style system
  • not be limited by the library we choose
  • make us (developers) better at CSS

The debate will rage on for eternity on whether to use Bootstrap, MUI, Styled Components, ChakraUI, TailwindCSS or Vanilla CSS. A few years ago, Bootstrap was almost the only thing available and the initial RentReef web application was built with Bootstrap.

The best resource I have found on this, is this video.

YouTube - The Best Of CSS - Tailwind vs MUI vs Bootstrap vs Chakra vs...

TailwindCSS​

We are using TailwindCSS a utility based CSS framework. Tailwind Playground

<div class="space-y-6 py-8 text-base leading-7 text-gray-600">
tip
caution

ESLint will not allow non-tailwind classes, as such we want no custom CSS or non-tailwind styling.

TailwindUI​

info

TailwindCSS has no interactivity or accesibility built-in, as such we can use TailwindUI prebuilt components. The idea is to start with one of these and edit to suit rentreef.

tailwindui

Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.

rentreef # root directory
├── 📁 main # next.js & storybook
│   ├── TailwindUIEXamples # TailwindUI
│   └── ...
  1. Application UI layout
  2. E-Commerce e-commerce
  3. Marketing marketing

ChakraUI - a potential Alternative​

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

ChakraUI has similar styling to TailwindCSS and comes with lots of accessibility out of the box. Migrating Tailwind classes to CharkraUI is a possibility and we can keep our same styling.

 <Box
    display='flex'
    alignItems='center'
    justifyContent='center'
    width='100%'
    py={12}
    bgImage="url('https://bit.ly/2Z4KKcF')"
    bgPosition='center'
    bgRepeat='no-repeat'
    mb={2}
  >

How to customise in ChakraUI​

Adding props to base components or customising the theme and creating our own variants.

// theme.js
import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Button: {
      // 1. We can update the base styles
      baseStyle: {
        fontWeight: 'bold', // Normally, it is "semibold"
      },
      // 2. We can add a new button size or extend existing
      sizes: {
        xl: {
          h: '56px',
          fontSize: 'lg',
          px: '32px',
        },
      },
      // 3. We can add a new visual variant
      variants: {
        'with-shadow': {
          bg: 'red.400',
          boxShadow: '0 0 2px 2px #efdfde',
        },
        // 4. We can override existing variants
        solid: (props) => ({
          bg: props.colorMode === 'dark' ? 'red.300' : 'red.500',
        }),
      },
    },
  },
});

export default theme;