Making Friendly CSS With Tailwind CSS

Making Friendly CSS With Tailwind CSS

Writing CSS can aggravate developers, but with tailwind, CSS becomes more friendly to use. In this article, I will be taking you on a journey into the utility first framework, “Tailwind.”

Writing CSS can aggravate developers, but with tailwind, CSS becomes more friendly to use. In this article, I will be taking you on a journey into the utility first framework, “Tailwind.”

What is Tailwind CSS?

According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Tailwind enables you to write inline styling and achieve a fantastic user interface without leaving your HTML code and writing a single line of CSS.

In contrast to other CSS frameworks like Bootstrap or Materialize CSS, Tailwind CSS doesn’t come with predefined or built-in components. Instead, Tailwind CSS provides you with a set of CSS helper classes that enables you to create a custom design with ease.

In my opinion, most sites built with Bootstrap always look alike and have the same feel. But Tailwind CSS is not opinionated, and it allows you to create your unique design.

Setting up a project with Tailwind CSS.

Learn how to get Tailwind CSS up and run your project.

Using Tailwind via CDN

Using tailwind via CDN is excellent if you want to set up a simple project or quick demo quickly. But note that many great tailwind features are not available via CDN.

Here is the latest default configuration via CDN:

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

HTML starter template

This is what your HTML5 doctype looks like when you include tailwind CDN.

<!doctype html>
<html>
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

</head>
<body>
  <h1>Welcome to Tailwind CDN</h1>
</body>
</html>

Install Tailwind via npm

Installing tailwind via npm or yarn gives you access to tailwind awesome features, unlike using tailwind via CDN.

Before you install tailwind via npm, create a new package.json file by using the npm command.

npm init -y

then Install tailwind via npm

npm install tailwindcss

Include Tailwind in your CSS

The next step is to include Tailwind in your CSS. You can do that by creating a new CSS folder. If you don’t have one, then you create a CSS file. You can name it whatever you like, but I would be naming it style.css for the sake of the project.

Add the following to the style.css file.

web-development tailwind-css css programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Exposing Most Common Web Development Myths | ByteCipher

Are you looking for the best Web and Mobile App Development Company in India? We at ByteCipher are offering creative & custom web and mobile app development services worldwide

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Tailwind CSS Is (Probably) Overhyped

A critical look at Tailwind CSS, the popular utility framework

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...