Tailwind CSS: How To...

What is Tailwind CSS?

Tailwind helps the developer by using in-line styling that acts like classes. I know personally that I loathe needing to jump around into different files to modify the style of components or elements I am working on in my JSX inside component files. So, let's get started on how to set it all up! Below is a detailed, step-by-step guide on how to get it all configured and up and running quickly! I will also include a couple examples of what you can achieve with Tailwind instead of the archaic, dusty, old CSS you know and... love...

Setup:

npm install -D tailwindcss
npx tailwindcss init // <-- will initialize tailwind.config.js

This last CLI command will generate a file (tailwind.config.js) to configure how Tailwind will be used in our project! The documentation describes this as setting up your "template paths".

module.exports = { // <-- default empty object
  content: [],   
  theme: {
    extend: {},
  },
  plugins: [],
}

(this config file is actually 'optional' and will fallback to the tailwind default config if not initialized:) https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js

For users who want to scaffold or add code into this default file use the command: npx tailwindcss init --full
For simplicity's sake I like to just init the file and keep it small and specific to what I want to customize as to avoid any potential issues since our project will reference our config file and the Tailwind full config file upon necessary lookup.

module.exports = {
  content: [ // <-- files that contain Tailwind Class Names
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}

The content array is where we will want to use Tailwind.

Below, we will create the styling we want applied through Tailwind.

module.exports = {
  // ...
  theme: {  // <-- where we will define our default styles
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

And a useful trick for if you intend to use Tailwind on top of basic CSS as well is to create a prefix option:

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

In this case Tailwind will automatically apply tw- to all of its classes to avoid any conflicts if your CSS accidentally share the same names!

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

Once you have finished your tailwind.config.js file...
You can navigate to your main CSS file and add the @tailwind directives to make sure the Tailwind classes and utilities will work in your project!

@tailwind base;
@tailwind components;
@tailwind utilities;

Much like how we use Babel with React and ES6 we should use the Tailwind build process to transpile our Tailwind utility classes into standard CSS styles that the browser will more easily understand. To do this, we run this CLI command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

We now will have a processed and transformed output.css file that will come from whatever we use in our input directory with all the fun Tailwind stuff that the browser will have no problem reading. The --watch flag ensures that each time we make a change to our input file it will transpile and update our output file.

We should also grab Tailwind's handy VSCode extension which will make our lives SO much easier with auto-complete IntelliSense for our new utilities and classes (just like with CSS). It will help when writing out directives as well as Syntax Highlighting and Linting.

Search for Tailwind CSS IntelliSense inside your VSCode and install the one with 2.4M+ downloads from Tailwind Labs!

You may need to go to your VSCode settings ( ctrl ,) type in editor.quickSuggestions and open the JSON file. You will see a JSON object that you can edit. Add the following for string suggestions: (and the last bit if you wish to use Tailwind by default...)

  // ...
  },
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "off",
    "strings": true // <--
  },
  "files.associations": {
    "*.css": "\"tailwindcss\"" // <-- to set Tailwind to default
  }
}

Next, we just link our Tailwind output file in the head of our HTML file and BOOM! (I'll include a basic example of an in-line styled DOM element as well)

  <link href="/dist/output.css" rel="stylesheet"> // <-- output
</head>
<body>
  <h1 class="text-3xl font-bold underline"> // <-- <b><u></u></b>
    Hello world!
  </h1>
</body>

Examples:

Look at how easily we can style an element right in our markup!
Below we create a class, give it a color and an aspect (shape and position) all in-line!!

<div class="bg-sky-50 aspect-square"></div>

The CSS equivalent would like something like this:

.sky-50 {
    background-color: #E1F8F9; // <-- Sky 50 
    padding-bottom: 100%;      // <-- aspect-square
    position: relative;        // <-- aspect-square
}

Yuck!

If you're like me and are sick and tired of dealing with how verbose CSS directives feel, or how annoying it is to navigate to different style-sheet files in other directories, I hope you all give Tailwind a shot. It is super user friendly and provides such an easier and quicker time to customize your elements right inside your HTML or JSX! No more esoteric #E1F8F9 and hideous CSS properties you have to look up on W3 schools! Yay!

Tailwind is also mobile first! So, it makes building for phone-apps easy.

Works Cited:

https://tailwindcss.com/

https://github.com/developedbyed/react-portofolio-with-tailwind