What is Tailwind? How to Install Tailwind?

Comments (0)

Views (148)

Of course, tailwind has entered our lives these days when Bootstrap is out of fashion. Although the purpose is the same, tailwind has a slightly different approach and variety of uses. So yes, it is possible to cast almost any design you can think of with tailwind's helper classes without using any css.

Of course, besides this, your responsive management becomes much easier. They have thought of almost everything you can think of :) I want to take a look at the tailwind so that we don't fall behind.

Setup

1-Use with CDN

If you want, you can start using tailwind by including only one relevant css file using the CDN service.

<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

Of course, when you use CDN, it comes with some restrictions. It seems like CDN is not a very good method since you can't customize it, but let's try to understand tailwind with a small example by adding CDN first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CDN Example</title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="bg-blue-200 p-3 text-center text-gray-700 mb-2">
        Tailwind lessons start with PHPEXAMPLE!
    </div>
    <div class="text-center mt-6">
        <a href="#" class="inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium text-sm bg-green-200 text-green-700 hover:bg-green-500 hover:text-white transition-colors">
            i liked
        </a>
        <a href="#" class="inline-flex mx-2 items-center px-4 h-10 rounded-md font-medium text-sm bg-red-200 text-red-700 hover:bg-red-500 hover:text-white transition-colors">
            i do not like
        </a>
    </div>
</body>
</html>

As you can see, we have successfully done the visualization process without writing css using many classes that tailwind has given us. Even for hover management, look how easy we are using hover: as well as a tags.

Frankly, I liked it a lot, of course, that's not all they can do :) I will continue to write here as an article as I discover it.

2-Usage with CLI

You can use Tailwind directly without any installation. If you run the following command, it will give you a css output with all the tailwind properties.

npx tailwindcss -o style.css --minify

Of course, the size of this is too big, there are a lot of things we don't use :) But this is not a problem for the development environment, we can delete all the unused ones when exporting to the production environment.

Now you can create your index.html file and start using it by calling style.css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CLI Example</title>
    <link href="./style.css" rel="stylesheet">
</head>
<body>
    <div class="bg-blue-200 p-3 text-center text-gray-700 mb-2">
        Tailwind lessons start with PHPEXAMPLE!
    </div>
    <div class="text-center mt-6">
        <a href="#" class="inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium text-sm bg-green-200 text-green-700 hover:bg-green-500 hover:text-white transition-colors">
            i liked
        </a>
        <a href="#" class="inline-flex mx-2 items-center px-4 h-10 rounded-md font-medium text-sm bg-red-200 text-red-700 hover:bg-red-500 hover:text-white transition-colors">
            i do dont like
        </a>
    </div>
</body>
</html>

As a result, if you open and look at your file, you will see that it works.

@apply directive

In my example above, only the colors of the buttons are different, everything else is the same. As such, one cannot help but think, why do I have to write the same things all the time? Actually you are not, you can write your own custom helpers with the @apply directive.

For example, let's change our html code like this.

<a href="#" class="btn bg-green-200 text-green-700 hover:bg-green-500 hover:text-white">
    i liked
</a>

<a href="#" class="btn bg-red-200 text-red-700 hover:bg-red-500 hover:text-white">
    i do dont like
</a>

We deleted the common ones in both. We left only those that differed.

Now we need to implement the others for .btn, but for this first let's create a tailwind.css file. And let's write the following in it.

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

I know that @tailwind directive does not exist in css, we will not use it anyway, we will create css output using it. Now I need to define my .btn class above in this file as follows.

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

@layer components {
    .btn {
        @apply inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium transition-colors;
    }
}

If you don't want to use the @layer directive here, define the .btn as @tailwind components; Write just below. Because otherwise we won't be able to crush it even if we use the classes that tailwind gives us. In addition, when we get the output for the latest production, they are removed if they are not used, if you write them outside of this, they will be included in all kinds of css.

As a result we will run the command to create style.css using this:

npx tailwindcss -i tailwind.css -o style.css --minify

Plugin Recommendations for Visual Studio Code

If you are going to write Tailwind, you will have to memorize a lot of things. Of course, if you know css well and have used tools like bootstrap before, it won't take long to get familiar with it, but it's still not very wise to keep everything in mind :)

The only plugin you need to install is probably this:

Tailwind CSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

I also highly recommend the following plugin for quick preview in the editor, not in the browser.

Preview on Web Server
https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server

After installing this plugin add the following setting in vscode settings.json.

"previewServer.port": 3000

Now, if you right-click on index.html and select Preview on side panel, the preview area will open on the right and your work will be much easier, especially if you are working on the big screen while developing. Also, of course, you can use the control + shift + v combination as a shortcut key. Make sure you are editing your html file while using this :)

Result

We didn't do anything bad for a start. Frankly, I made a start by reading the documentation, I will continue to write here to keep my knowledge fresh as I learn, see you in the 2nd article :)

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !