category: CSS
Posted on: May 6th 2021, 6:15pm
Last modified: May 6th 2021, 6:20pm
First at 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 href="/css/tailwind.css" rel="stylesheet">
</head>
<body>
<h1 class="text-4xl font-bold text-center text-blue-500">Hello world !</h1>
</body>
</html>Create package.json file by typing,
npm init -yThen install the following package,
npm i -D tailwindcss postcss autoprefixer viteThen create the tailwind.config.js and postcss.config.js file,
npx tailwindcss init -pAt package.json file, change the scripts as follows,
{
"name": "01-setting-up-tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.2.14",
"tailwindcss": "^2.1.2",
"vite": "^2.2.4"
}
}
Finally, at tailwind.css,
@tailwind css;
@tailwind components;
@tailwind utilities;
references:
Recommended
HTML markdown cheatsheetInstall netlify cli globallyCustomizing font family and color in Tailwind.cssGenerate full version of tailwind.config.js fileEnable variant in the config file for Tailwind.cssSetup Tailwind workflowUsing @apply with Complex ClassesCustom animation in Tailwind.cssGradient in TailwindLoop through JSON object