Tailwind, Flowbite, React, oh my.

If you are familiar with CSS, you probably have found it slightly frustrating to troubleshoot your styling. You made your styling code in your css file, you double check your names or ids, then you open your browser to see if anything has changed. It's a laborious workflow. Fortunately, their are styling frameworks to help you style your front-end with ease. Specifically, Tailwind is a styling framework that can speed your up your workflow so you can worry about more important things.

Tailwind is a framework for css that uses class names to style your projects. The documentation on their website is very clear and concise.

To install Tailwind for React:

Make a new project:

npx create-react-app my-project
cd my-project

***It's important to be in your react directory when you install Tailwind.

Next install Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

These commands will install taildwind, postcss, and autoprefixer. These allow you to use tailwind's classnames for your styling.

Next in your tailwind.config.js, add all these paths to your tailwind template file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Last step is to add these directives in your main CSS files (usually it's in './src/index.css'):

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

And that's it! Tailwind is installed. Let's go through some examples in how to implement this styling framework...

Comments

[fats-cmd]

I find it hard to style flowbite react components in jsx in the way I want