Now that we have seen how amazing Tailwind can be in the pervious blog, let's look at how we can use it in our project by installing it in our local machine.
According to the documentation, there are two ways of installing TailwindCSS.
- Installation via npm
- Using it via CDN
Installation via NPM
Step 1 (or so) - Setting up environment
In this section, we shall be setting up our environment to be able to use Tailwind, sit back and follow along
First things first, Open up your preferred Code editor, I use Visual studio code. Make sure you are connected to the internet, as npm would need the internet to install Tailwind.
Done? Good.
You need node.js installed on your computer because we would need npm to install Tailwind. You can check if node is installed on your machine by typing this in your terminal
If not installed, go to the official website and download node.js
Step 2 - Creating folder structure
Create a new directory and cd into this folder. We would create a package.json file with default values. This would help keep track of all our dependencies we would install.
mkdir tailwind-demo
cd tailwind-demo
npm init -y
Your file structure should be similar to this.
Step 3 - Tailwind CSS Installation
Open your terminal in your code editor with your folder opened.
Type: npm init -y
Open your terminal in your code editor with your folder opened.
npm install tailwind css
Inside our tailwind-demo folder, we would create two sub-folders src and public. We would create a file called styles.css inside our src folder. Your file structure should be similar to this.
Step 4 - Adding a Tailwind Configuration File
@tailwind base;
@tailwind components;
@tailwind utilities;
In our package.json file, we would replace the script
Step 5 - Processing and Building Tailwind
The build-css is a random name and you can decide to use another name instead. It is important to note that styles.css (public) is not being created manually but being built into using the code below.
'build-css': 'tailwindcss build src/styles.css -o public/styles.css'
Using the terminal, we would build our styles.css(src folder) into a styles.css(public folder).
npm run build-css
Now check your public/style.css to confirm. Cheers!!! We just installed TailwindCSS. Horray.
Final step - index.html Creation and Viewing Our CSS!
Inside the
tag, we need to add a link to our stylesheet (the in the following snippet):<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="build/index.css">
</head>`
Don't forget to link to public/stylesheet to your HTML file.
`<link rel="stylesheet" href="public/stylesheet">
This is the div where we'll see our TailwindCSS at work. Write out your first ever TailwindCSS class by adding a class with TailwindCSS classes inside it to your HTML:
<div class="bg-gray-400">Hello!</div>
Now, inside the
tag, insert this:<div>Hello World!</div>
Now open that file in your favorite web browser, and you should see this:
2.Installation via CDN
Here, we would include the CDN link into the head of our HTML document.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<!-- ... -->
</body>
</html>
This is quite straightforward and should be used only for small projects. This is due to the fact that most features that make tailwind CSS great are not available when installed through this method.
Therefore to have access to all the awesome features of this framework, it is recommended to install it via npm.
Thanks for reading, and have fun with your new CSS framework!
Resources
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.
Keep learning! Keep coding!! 💛
Top comments (0)