What is Tailwind CSS?
In essence, Tailwind CSS is a utility-first CSS framework for quickly creating unique user experiences. It is a low-level, highly adaptable CSS framework that provides all the building pieces required to create custom designs.
Today Tailwind CSS has taken the lead as the most popular CSS framework, leaving behind previous front-runners like Bootstrap.
The benefit of Tailwind CSS is that it makes it simple for developers to alter CSS classes to produce distinctive styles and personalized user interfaces. because there are no restrictions on designs with Tailwind CSS, the developer has complete freedom when it comes to selecting styles. Many developers choose Tailwind CSS over frameworks like Bootstrap that have pre-built style kits because of its design freedom.
Why Should You Use Tailwind CSS?
It is best for creating responsive websites
It has smaller CSS files
it is easy and fast to use
it has a non-restrictive framework and no pre-set styles/components
it can re-use component style
How to get started with Tailwind CSS
Step 1- Install the package
npm install tailwindcss
Step 2- Add tailwind to your created CSS file
After creating a CSS file, copy the following code into the file. What this does it allow you to use Tailwind by adding it to your project.
@tailwind cssbase; @tailwind component; @tailwind utilities;
Step 3- Create your Tailwind Configuration file
Enter the code below into your terminal.
npx tailwindcss init
After running, a new file called "tailwind.config.js" will appear in your project, containing the following code.
module.exports ={ purge:[], theme:{ extend:{}, },final variants:{}, plugins:[], }
Step 4- include the Postcss file In the terminal run
$ npm install postcss-cli autoprefixer
After the above installation is finished, enter the following code into the terminal.
$ touch postcss.configure.js
now, you should have a file called postcss.config.js. Add the code below to the plugins.
module.exports ={ plugins :[ require ("tailwind.css"), require ("autoprefixer"), ] }
I know you are wondering what "PostCSS" means, but worry no more, I am here to explicitly explain everything in this blog for you.
Now, what is PostCSS?
PostCSS is a tool used for transforming CSS with Javascript plugins. It gives you access to Tailwind by adding it to the plugin then It generates a build folder in which the processed Tailwind is saved.
Step 5- in the terminal run
npx postcss tailwind.css -o public/syle.css
lastly;
npm run build
The installation is done at this point. You must now create an index.html file where you will be running your tailwind CSS code.
Conclusion
Easy now? Yes! I know it is now made easy for you to install your tailwind CSS and now you can tell after you have practiced it that Tailwind CSS is the best CSS framework.
It's time to start experimenting with Tailwind CSS now that you are up and running. Now that you can see how interesting Tailwind CSS is and it might just become your favourite CSS framework.
Check out the links below to learn more about Tailwind CSS.
https://www.youtube.com/watch?v=ft30zcMlFao
https://www.youtube.com/watch?v=lCxcTsOHrjo
Now get to work! 😊
Feel free to message me on my Social accounts for any help.
https://twitter.com/tech_Olaide