What is Tailwindcss
Tailwindcss is a CSS framework that helps you rapidly build modern websites by using utility classes in your HTML. It is a framework that helps you build websites using the concepts of CSS. Even though you are still writing CSS when you use Tailwind, you will be able to do it more quickly and effectively. There are too many benefits to list here, but once you start using it, you'll be happy you did.
I'll assume you are well-versed in CSS; otherwise, you might run into issues using Tailwindcss. If you haven't built a few projects using CSS concepts like Flex, Grid, Animations, Responsiveness, and Positioning, I'd suggest skipping learning Tailwindcss for the time being and instead building a couple of those kinds of projects.
There are different methods of installing Tailwindcss for your project. However, in this article, we will focus on installing it via Node Package Manager (NPM) in the Command Line Interface(CLI). At the end of this article, you will be able to set up Tailwindcss for your HTML projects.
Steps to installing Tailwindcss for your HTML project
I want to walk you through each step of the installation. Please follow the instructions even if you don't understand some of them; once the installation is complete, I will go over them with you.
First, you need to check if Node is installed on your computer by entering this command;
Node -vin your CLI. If this is your first time using the CLI, make sure you enter the commands exactly as you see them, and you should be fine.
On Windows, press Win + X key then select Command Prompt(Admin) from the options. On Mac, press the Command + Space bar to open the Spotlight Search then type Terminal and press Return.
If you have Node installed, you will get a response like in the image below
If you don't get the version of Node, it means you don't have it installed on your computer. To install it, select the respective installer for your computer on the Node.js website
Follow the installer prompt and after installing, confirm you have Node installed by entering Node -v in Command Prompt once more.
For the remainder of the tutorial, we will use the CLI in VS Code.Open your project folder in VS Code and create an index.hmtl file. Click on Terminal from the toolbar in the upper left corner.
You should get a new window like this
Next, we will download the Tailwindcss package via NPM and create a tailwind.config.js file.
Enter this command in the Terminal;npm install -D tailwindcssto download the Tailwindcss package.
After the download is completed, enter this command;npx tailwindcss initto create the tailwind.config.js file.
Your new folder structure should look like this;
In the config file that we created earlier, configure your template files by adding;
"./**/*.{html,js}"to the square brackets of the content property.
Create an src folder and create an input.css file inside the src folder.
Add the following Tailwind directives to the file;
@tailwind base;
@tailwind components;
@tailwind utilities;
Next, we start the tailwind build process by entering this command in the Terminal;
npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
Add the output.css file to the
<head></head>in your HTML and start using the utility classes to style your webpage.
Folder structure and files in Tailwindcss
Let's analyze the folder structure and files created when we installed Tailwindcss
The node_modules folder is where Tailwind is stored, it contains all the packages Tailwind depends on and you will have no reason to go into the folder to make any changes.
The package-lock.json file comes with the node_modules folder and you don't have to go into the file to make any changes.
The package.json file is used to keep track of our dependencies. You will see Tailwindcss as a dependency inside this file.
The input.css file in which we added the Tailwind directives is our source file. We can use this as a global stylesheet for adding Tailwind features and syntax and also add our basic CSS classes too.
In step 6, we ran a command to start the build process. This command is necessary to build our source CSS file into another new CSS file. According to how you named the path, this command will automatically create a new folder and a new CSS file. In this case, the folder name is public, and the file name is output.css.
The output file contains all our final CSS rules and we link this file to our HTML page.
Every time we make a change to the source file or add utility classes to our HTML, the build process command is automatically executed and this happens so that Tailwind can rebuild our source file into the output file
We rarely have to make changes to the source file directly because using Tailwind will mostly be done by writing inline utility classes in our HTML.
The tailwind.config.js file is for adding customizations like fonts, colors, screen sizes etc. We added a path to the content property in this file to ensure that Tailwind can successfully locate all the CSS classes in our JS and HTML files.
Conclusion
Congratulations, you have successfully installed TailwindCSS for your Project. I don't want this article to be too long, so I will add a link to another tutorial explaining best practices and how to use Tailwind in your project. I hope you learned something new from this article, see you next time 🏽
Top comments (0)