Getting started with Tailwind css

I have been a lover of vanilla css for ages, practically because I was too lazy to learn a framework. Tried out bootstrap and Sass but went back to vanilla after a while (yeah I know, many persons hate vanilla css). Few months ago, I stumbled unto Tailwind css on twitter and decided to give it a try and then, here we are...did you get it?, I don't think you do, lol never mind.

P/S: I didn't choose tailwind because it's better than bootstrap or Sass or other frameworks but maybe because I simply like the name.

So, do you want to get started using tailwind as your postcss in your React, then come along with me on this little journey.

The very first thing is to create a new react-app if you've not done that already...let's call it tailwind-css

npx create-react-app tailwind-css

then, you cd into your react folder and install the following dependencies

cd tailwind-css
npm i tailwind-css postcss-cli autoprefixer
npx tailwindcss init --full
touch postcss.config.js

the above code works you right into your folder, installs the dependencies, and creates a file called tailwind.config.js and postcss.config.js

The next thing is to cd into your src folder and create a styles folder with two css files; main and tailwind

cd src
mkdir styles
touch main.css
touch tailwind.css

Yeah, I love using the terminal so the codes. What I did above is open up the src folder and create another folder called styles, in your styles folder create two files called main.css and tailwind.css. In your tailwind.css file, import the following...

@tailwind base;

@tailwind components;

@tailwind utilities;

Next is to open your postcss.config.js file and write the small code

module.exports = {
    plugins: [ require('tailwindcss'), require('autoprefixer') ]
};

This imports the installed dependencies viz tailwind and autoprefixer from your package.json. Next, we head over to package.json file and make a little editting.
Under the scripts line, where your start code is written, add this line of code to it

"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"

Careful here, what this does is it looks for the following directory, builds and passes the outputs into the output directory so make sure you follow my steps or if not, try and place your tailwind and main directory accurately. After this, we run this code

npm run build:css

to build into the main.css file(after successful build, open up main.css to see the output)

Now you'are all set to write your very first tailwind css, to see the magic head over to your app.js component or any component you want to create and import main.css file into the component and enjoy.....

import '../styles/main.css';

One more thing, I had a little challenge when installing and using tailwind in my css. When I ran my npm run build:css, I got some errors like

TypeError: Object.entries(...).flatMap is not a function

Solution: If you get this error too, this is a node problem. Upgrade your node to the latest version and wallaa!!!, your code should build now

Also, I got another error that looked like this

Error: true is not a PostCSS plugin

Solution: This is a postcss error, check if you properly installed postcss-cli and not postcss. If you did the latter, what you can do is deleting the installed dependency and install the correct one. And that's it...Thank you for sticking with me through here and also check tailwindcss.com doc for more concepts.