A utility-first CSS framework for rapid UI development : Tailwind CSS

Photo by KOBU Agency on Unsplash

What is Tailwind CSS

Why use Tailwind CSS

A utility-first framework

<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
Button
</button>
Button using tailwind css

Customization

npx tailwindcss init
npx tailwindcss init --full

Ease of use

Down sides

<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="rounded-lg md:w-56" src="..." alt="Woman paying for a purchase">
</div>
<div class="mt-4 md:mt-0 md:ml-6">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
<a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>

No predefined components

Getting started with Tailwind in React Js

npx create-react-app react-tailwindcss && cd react-tailwindcss

USING NPM

npm install tailwindcss postcss-cli autoprefixer -D

USING YARN

yarn add tailwindcss postcss-cli autoprefixer -D
npx tailwind init tailwind.js --full

Getting Started

npx create-react-app react-tailwindcss && cd react-tailwindcss

Using npm

npm install tailwindcss postcss-cli autoprefixer -D

Using Yarn

yarn add tailwindcss postcss-cli autoprefixer -D
npx tailwind init --full

How To Configure PostCSS?

WHY AUTOPREFIXER ?

touch postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js'),
require('autoprefixer')
],
};

Code Steps

Inject Tailwind CSS

cd src;mkdir styles;cd styles;
touch tailwind.css
@tailwind base;@tailwind components;@tailwind utilities;

CSS BUILD

"scripts": {
...
"start": "npm run watch:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
"watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
...
},

IMPORT THE CSS

import './styles/main.css'

Developer @AE | Fullstack Dev