Get Started with Tailwind CSS #2

31
2

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.

  1. Installation via npm

  2. 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.
Image description

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.
Image description

Step 4 – Adding a Tailwind Configuration File

@tailwind base;
@tailwind components;
@tailwind utilities;

In our package.json file, we would replace the script

Image description

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.

Image description

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:
Image description

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

Tailwind Docs.
Tailwind Labs.

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!!

2 thoughts on “Get Started with Tailwind CSS #2

  1. Thanks for this, really helped me!!

  2. Thanks Shubhangi, great stuff!