Monthly Archives: March 2022

Tailwind CSS

Create a folder in /workspace/tailwind. Then run the command below to initialize tailwind css.

npm init -y
npm i tailwindcss

Create the src/style.css

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

Create ./index.html and dist/style.css

Paste bootstrapping html code into ./index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Open package.json and modify the code:

"scripts": {
    "build:css": "tailwind build src/style.css -o dist/style.css"
 },

Use the command below to build the distribution file

npm run build:css

Start a HTTP web server using NPM so you can preview and test in the web browser

npm install --global http-server
http-server

Last, view the project in web browser with URL like http://127.0.0.1:8080/dist/

Migrate from bootstrap

Here are few points you need to know if you are migrating over from bootstrap:

  • Tailwind is not a component library and has no JS dependency
  • Which means you wont get things like datepicker, tab, carousel….
  • You may wanto check out DaisyUI, Flowbite or TailwindUI which cost around RM1,200