HOW TO ADD TAILWIND CSS TO YOUR PROJECT
Hello everyone, Welcome. Today we will be learning how we can add tailwind CSS into our project, but before we start, we will have a brief introduction on what tailwind CSS is all about, what it is used for, and its advantage.
WHAT IS TAILWIND CSS
Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. Tailwind CSS is the only framework that I’ve seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny. (Source: Tailwindcss)
Wrestling with a bunch of complex media queries in your CSS sucks, so tailwind lets you build responsive designs right in your HTML. (Source)
That will be enough introduction of Tailwind CSS but if you would want to know more click HERE!!!
HOW TO ADD TAILWIND CSS INTO YOUR PROJECT.
To add tailwind CSS into your project, you will need, a code editor (vs code preferably), a steady internet connection, and maximum attention. So let’s get started right away.
Create a new folder with the name of your choice, in the folder, create two more folders, in my case, I named one folder “src” and the other “public”. In my “src” folder, I created a CSS file with the name “style.css” while in the “public” folder, I created two files, with the names of index.html and style.css.
Then go to your terminal located at the top of the vs code, click on new terminal and run “npm init” then enter. The code above is used in creating a package.json file. When we have done that, keep clicking enter for the package name version description entry point test command git repository keywords author and license. A question will be displayed asking is this ok? (yes) Click enter, then a package.json file will be created.
Still in your terminal, run npm install –D tailwindcss. This code installs tailwind CSS into your project, when it’s done installing, you will see a node_modules folder created. After installing tailwind CSS with the code above, we will have to initialize it into our project using npx tailwindcss init when you run this code, a tailwind.config.js file will be created.
Open the tailwind.config.js file, go to where they wrote content, and write these [“./public/*.html”]. since my output is in the public folder, that is why I used public but in your case, if you named your output as anything e.g “output”, the content should look like this; [“./output/*.html”].
Go to style.css in the src folder and write these or you can just copy it from the tailwindcss site;
@tailwind base;@tailwind components;@tailwind utilities;
“scripts”: {“test”: “echo\”Error: no test specified\ “&& exit 1”},
Delete and replace with;
“scripts”: {“dev”: “npx tailwindcss -i ./src/style.css -o ./public/style.css — watch”},
Where the -i stands for input while the –o stands for the output, — watch, observes the style.css in the scr and public folder and implement those changes.
After that, go to your terminal and run npx tailwindcss -i ./src/style.css -o ./public/style.css –watch. Go to your index.html file, link your CSS file in the index.html using <link rel=”stylesheet” href=”style.css”>, in the body create any tag of your choice, in my case, I used the <h2> tag with “my name is Tailwind CSS written in-between the opening and closing tag and a class of bg-red-500 i.e <h2 class=”bg-red-500”> My name is Tailwind CSS </h2>.
When you go to your style.css in the public folder, you will notice that the, bg-red-500 was generated automatically, as shown in the image below
View it on your web browser, you should see all the effects which were added.
Click Here to access the complete project
Lastly, go to your Extension, download and enable Tailwind CSS IntelliSense, this enhances the Tailwind development experience by providing Visual Studio code users with advanced features such as autocomplete, syntax highlighting, and linting.
Click Here to access the video to the project.
CONCLUSION
If you followed the steps till this point, congratulations. You can now make use of the tailwind CSS framework with ease.
For you to use the tailwind CSS framework, you are advised to have fundamental/basic knowledge of CSS. You can get the step by step installation of tailwind CSS by clicking HERE
Hope this article was helpful? if Yes, kindly click and follow me on medium and the listed platforms below.
Twitter: @Derekvibe26
linkedin:@Emmanuel Okoro
Happy coding!!!
