In this article, you will learn what Tailwind CSS is, how it differs from traditional frameworks, and why it has become a favorite among developers globally. We'll explore its benefits, such as efficiency, customization, and performance, along with practical steps to get started. By the end, you'll understand why companies like Netflix and OpenAI rely on Tailwind CSS for their web development needs.
What is Tailwind CSS
Tailwind CSS is an open-source CSS framework released in May 2019. Unlike other frameworks,like Bootstrap, it does not provide pre-designed UI components such as cards or buttons. Instead, it provides low-level utility classes to build custom designs directly within your HTML file.
These utility classes are small single-purpose CSS classes that can be directly applied to HTML elements. A lot of big companies like Netflix, OpenAI, Microsoft, and many more are using this tool. That is to let you know how Tailwind CSS is widely used globally. Moreover, what can be so special in Tailwind CSS that big tech companies adopt? You can find an article about that here.
Benefits
Tailwind CSS offers a range of benefits that make it a powerful tool for developers. Are you looking to create efficient, customizable, and high-performance designs? Let’s discover it in the coming lines.
- Efficiency
Tailwind CSS offers exceptional efficiency. It allows developers to create designs quickly and efficiently without writing any CSS code manually. Which is a time saver.
- Customization
It provides predefined classes that allow you to adjust the design according to your needs. Moreover, developers can also create their courses and customize the design further. It saves you time but still doesn't limit your options for customization. You have the freedom to create and innovate in your designs.
- Performance
In general, it is safe to say that Tailwind CSS is faster than regular CSS because it uses a special technique called dead code elimination. Which gets rid of unused CSS rules before your style sheet even reaches the browser. Cool feature right :)?
- Community
Tailwind CSS has a large and active community that contributes to its development and maintenance. This ensures that the framework is always up-to-date, which is very important for a framework. People are always keen to share how they are using it, which welcomes variety and tons of examples to base on.
Prerequisites
For you to follow along easily with this tutorial, ensure you have the following installed:
-
Node.js: You can verify if you have Node.js installed by typing
node -v
You will then see your node.js’s version and if it is not installed it will throw an error. You will then need to download it and install it. Follow this link.
- Code editor: You can choose the one you want. We are going to use Visual Studio code in this tutorial.
- Browser of your choice: We use Firefox
- Optional: Extension installation if you have VS Code:
- Tailwind Intellisense
- Prettier
NB: If you do not have these extensions it is okay.
Installation
In this part, you will learn how to install Tailwind CSS using a JavaScript framework(ViteJS). We chose ViteJS because it is easy to install, to use and requires few configurations to start with. All of that makes it ideal for our tutorial.
Step 1: Search for Tailwind CSS doc on your browser
Search for Tailwind CSS official documentation on your browser or you can copy this link : https://tailwindcss.com/. Once you reach the documentation page, your interface should look like the image below.
Step 2: After reaching this page, click on the Docs link as shown in the screenshot below
Step 3: After clicking on docs, you will reach a page that looks like this, as shown below:
Step 4: Click on Framework guides under the installation header
After clicking on the Framework guides, you will see the page below. When on the designated page you will see a list of different frameworks. Among those frameworks, please select ViteJS.
Step 5: Choose ViteJS as a framework
ViteJS has a lot to offer: a fast and modern development experience, which is ideal for integrating Tailwind CSS efficiently. Simply, it is fast and makes it easy to work with Tailwind CSS.
After clicking on ViteJS you will reach a page that looks like this as shown below:
Project creation
In this section, we are using the official documentation by following the steps one by one. We will split this section into different sub-sections for easy understanding and better comprehension. Ensure you follow them one at a time.
Step 1: ViteJS project creation
The first thing to do is to type in the below command in your terminal. This will allow you to put the first stone of the construction, which is to create a ViteJS project.
Command : npm create vite@latest my-project -- --template react
Note: Make sure to change the ‘my-project’ to the name that you want. We will take ‘tailwind_project’ as our project name.
Our command is then : npm create vite@latest 'tailwind_project' -- --template react
After typing the above command and hitting enter, you will see the question below
Type y or press ENTER
You will see this message below when the installation is complete:
Step 2: Change the directory or enter into the directory of your project
After that, we navigate into our directory which has the same name that we defined one step earlier, by typing: cd 'tailwind_project'
Step 3: Tailwind installation
After changing the directory, run the following command to install finally Tailwind CSS :
npm install -D tailwindcss postcss autoprefixer
Note: This process may take a few seconds, depending on your computer's specs and your internet connection, so please be patient.
Step 4: Open the project with your code editor and check if Tailwind CSS is properly installed
We can check if it is properly installed by going into the file and looking at it. If it is installed, you will see Tailwind CSS in the dependencies part, as shown in the screenshot below. If it is not, you must ensure that you have a proper internet connection or enough space and redo the command.
Step 5: Tailwind Configuration
Now that we have installed it, we need to configure our project to recognize the classes that you will use in your project.
Let’s initialize Tailwind CSS in our project by running this command in the terminal:
npx tailwindcss init -p
The command above will generate tailwind.config.js and postcss.config.js files. You should have received a confirmation message as below.
Step 6: Add tailwind directives
After generating the two files, copy the code below and add it to the tailwind.config.js file.
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
Before adding the code, we have this code below in tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
After adding, we have the following
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
If you are following Tailwind CSS documentation, copy the above code and paste it into ‘tailwind.config.js’ file as shown below:
Main CSS modification
We are almost finished. We have configured the paths and initialized Tailwind CSS in the entire project. The next step is to update our main CSS file. In your case, the main CSS file is index.css. You can access it in the src folder as shown below:
Step1: Go to index.css and add Tailwind directives
The first step is to go to the index.css file. Once there, copy the code below and add it to the beginning of your main CSS file. Please remember to put that at the top of your code before any other CSS code.
@tailwind base;
@tailwind components;
@tailwind utilities;
Below is how your code should look after adding the code above.
Run your project
We are in the last sprint now, only one thing to do. The thing is: type npm run dev in your terminal, hit ENTER, and voilà, you have launched your first ViteJS app. Please remember that you need to be in your project directory. Then open your terminal with VSCODE or any other IDE. And then you type the command in that terminal.
Step1: Copy the URL on the terminal
Generally, after you hit the ENTER button, some logs should appear in your terminal. As shown in the image below. These logs confirm that your project is functional, and it is running on your computer.
TODO: Copy the URL: http://localhost:5173/,paste and hit ENTER into your favorite browser
Step2: Visualize your project on your browser
After hitting the ENTER button, the project will load in a few seconds, and you should be able to see the screen below on your browser. Consider that this is Vite.JS default design, so you should not mind the look much.
Testing
As we have installed our project and launched it, we want to make sure that Tailwind CSS works fine. We are going to edit some parts of the existing code to see how it affects the rendering.
Step 1: Go into the App.jsx file.
Step 2: Change the color of the surrounding text in red
Step 2.1 : New CSS Class
Put the following class: text-red-500 into the <h1></h1> tag that contains the text we want to modify. Copy-paste:
className='text-red-500'
Result
Voilà, the text is now red, you have successfully styled your text using Tailwind utility classes.
You are now ready to go further on using Tailwind CSS.
Conclusion
You can install Tailwind CSS in any project by following simple steps. Tailwind CSS is easy to use, customizable, and developer-oriented. Moreover, it has a big community where you can find support.
Moreover, explore Tailwind CSS documentation, build, create, and design whatever you think. This tool is a key element that you can use without limits, and it is free.
How can we use Tailwind CSS in a real project? Let’s use it in a concrete project. In the next article, we will build a simple project where we deep dive into Tailwind CSS usability. See you there!
Links of resources
My Development Environment
- Operating system: Debian12 Bookworm
- Code editor: Visual Studio Code
- Browser: Firefox
- Nodejs version: V18
Top comments (0)