Taste a Little Bit of Tailwind-css for Beginner

20 May, 2021

Introduction

Recently, there is buzzing alert all-around about Tailwind-css.
Why? Let’s skim it a little bit here.

Installation

First, set up the basic environment

CMD

// create folder any location you want
$ mkdir tailwindcss-study
$ cd tailwindcss-study

// create package.json inside the folder
$ npm init -y

// install tailwind-css
$ yarn add tailwindcss@latest postcss@latest autoprefixer@latest // if you are yarn user
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

// install tailwind config with full option
// if you don't need full option, just `npx tailwindcss init`
$ npx tailwindcss init --full

Edit the script line in package.json

package.json

{
	//...
	"scripts": {
		"build-css": "tailwindcss build src/styles.css -o public/styles.css"
	}
	//...
}

Generate folder /src from the root folder. Then, Create the styles.css file inside and fill the content inside like below.

src/styles.css

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

Generate folder /public from the root folder. Then, Create an index.html file inside and type inside.

public/index.html

<!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>Document</title>
		<link rel="stylesheet" href="./styles.css" />
	</head>
	<body>
		<div>
			<!-- start nav -->
			<div>
				<nav>
					<div>
						<h1>
							<a href="/">Soom Food</a>
						</h1>
					</div>
					<ul>
						<li>
							<a href="#">
								<span>Home</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span>about</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span>contact</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- end nav -->

			<main>
				<div>
					<a href="#">Log in</a>
					<a href="#">Sign up</a>
				</div>

				<header>
					<h2>Recipes</h2>
					<h3>For soomers</h3>
				</header>

				<div>
					<h4>Latest Recipes</h4>

					<div>
						<!-- cards go here -->
						<div>
							<img src="https://via.placeholder.com/300x150" alt="testImage" />
							<div>
								<span>5 test image</span>
								<span>captured by Soom</span>
							</div>
						</div>
					</div>

					<h4>Most Popular</h4>

					<div>
						<!-- cards go here -->
					</div>

					<div>
						<div>Load more</div>
					</div>
				</div>
			</main>
		</div>
	</body>
</html>

Run the script, then your project folder looks like the tree below.

CMD

$ yarn build-css // if you are yarn user
$ npm run build-css

Project folder

└── tailwindcss-study/
		├── public/
		│   ├── index.html
		│   └── styles.css
		├── src/
		│   └── styles.css
		├── package.json
		└── tailwind.config.js

Now, you are ready to roll!
If you are struggling with setting up the environment, don’t worry.
I add here Codepen project with setting for Tailwind-css here.