Create a folder in /workspace/tailwind. Then run the command below to initialize tailwind css.
npm init -y
npm i tailwindcssCreate 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:cssStart a HTTP web server using NPM so you can preview and test in the web browser
npm install --global http-server
http-serverLast, 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
