umma.dev

Tailwind is a utility-first CSS framework. Unlike libraries like Bootstrap, you are able to customise things like buttons, navbars, margins, colours etc. all through a config file. Tailwind is similar to Bootstrap in that it takes a mobile first approach and allows you to set screen sizes to enable the app to be responsive.

How to Intall Tailwind

• Head over to the project you would like to use Tailwind in and open up a terminal

npm install tailwindcss or yarn add tailwindcss

• You will then need to inject Tailwind’s base, components and utilities styles into your CSS file

@tailwind base;

@tailwind components;

@tailwind utilities;

• If you are using Webpack or similar, you will to inject the styles in the following way

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

• Once this is done, it is time to set up the Tailwind config file

npx tailwind init

• The command above will create a tailwind.config.js file in the root of your project

• The default Tailwind config can be found on GitHub

The Config File

The config file enables you to define customisations for various different elements of your UI.

You can change the default colours, spacing, padding, buttons etc. Essentially you are able to build a theme around your application.

Tailwind does a good job of explaining everything you need to know about the config file here.

Using Tailwind in your Application

There are many ways Tailwind could be incorporated into an app. I will discuss two key features, grid layout and colours.

Grid Layout

Tailwind enables you to create responive grids for various different screens. The following options are available for screen size `all, sm, md, lg and xl`.

<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6"></div>

Colours

Colours can be set via their corresponding numbers like below.

.btn-test {
    background-color: theme('colors.red.100');
}

Tailwind Variants and Plugins

Variants

Variants within the config file is where you control core utility plugins, such as responsive, hover, focus etc.

The order of variants is very important, for example focus has the highest precedence for backgroundColor but hover has the highest precdence for borderColor.

It is recommended variants are ordered in the following manner:

['responsive', 'group-hover', 'focus-within', 'first', 'last', 'odd', 'even', 'hover', 'focus', 'active', 'visited', 'disabled']

The default variants are as followed:

module.exports = {
  // ...
  variants: {
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    appearance: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundColor: ['responsive', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    borderCollapse: ['responsive'],
    borderColor: ['responsive', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive'],
    boxShadow: ['responsive', 'hover', 'focus'],
    cursor: ['responsive'],
    display: ['responsive'],
    fill: ['responsive'],
    flex: ['responsive'],
    flexDirection: ['responsive'],
    flexGrow: ['responsive'],
    flexShrink: ['responsive'],
    flexWrap: ['responsive'],
    float: ['responsive'],
    fontFamily: ['responsive'],
    fontSize: ['responsive'],
    fontSmoothing: ['responsive'],
    fontStyle: ['responsive'],
    fontWeight: ['responsive', 'hover', 'focus'],
    height: ['responsive'],
    inset: ['responsive'],
    justifyContent: ['responsive'],
    letterSpacing: ['responsive'],
    lineHeight: ['responsive'],
    listStylePosition: ['responsive'],
    listStyleType: ['responsive'],
    margin: ['responsive'],
    maxHeight: ['responsive'],
    maxWidth: ['responsive'],
    minHeight: ['responsive'],
    minWidth: ['responsive'],
    objectFit: ['responsive'],
    objectPosition: ['responsive'],
    opacity: ['responsive', 'hover', 'focus'],
    order: ['responsive'],
    outline: ['responsive', 'focus'],
    overflow: ['responsive'],
    padding: ['responsive'],
    pointerEvents: ['responsive'],
    position: ['responsive'],
    resize: ['responsive'],
    stroke: ['responsive'],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
    textColor: ['responsive', 'hover', 'focus'],
    textDecoration: ['responsive', 'hover', 'focus'],
    textTransform: ['responsive'],
    userSelect: ['responsive'],
    verticalAlign: ['responsive'],
    visibility: ['responsive'],
    whitespace: ['responsive'],
    width: ['responsive'],
    wordBreak: ['responsive'],
    zIndex: ['responsive'],
  }
}

Plugins

Plugins enable you to be able to create functions that register new styles for Tailwind, which are injected into the stylesheet of the project.

There are several helper functions:

addUtilities()  -   registering new utility styles
addComponents() -   new component styles
addBase()       -   registering new base styles
addVariant()    -   registering custom variants
e()             -   escaping strings meant to be used in class names
prefix()        -   manually applying the user's configured prefix to parts of a selector
theme()         -   looking up values in the user's theme configuration
variants()      -   looking up values in the user's variants configuration
config()        -   looking up values in the user's Tailwind configuration

You can view all of the plugins avaiable on Tailwind here.

To view the documentation on plugins here.

Helpful Resources

Tailwind cheat sheet