↓Skip to main content

如何安装并使用Tailwind CSS

2023-03-20· 0 · 0 ·

tutorial tailwind

Table of Contents

Table of Contents

Install Tailwind CSS>

Install Tailwind CSS #

最简单的方法是用npm安装Tailwind CSS。

如果没有安装Node.js，则先到Node.js的官网安装Node.js。
在终端输入node -v命令检查Node.js是否安装成功，若出现Node.js的版本号，则代表安装成功。
```
node -v
```
用VS Code打开项目文件夹，再打开VS Code的终端，用npm命令创建一个package.json，我们将用这个json文件来追踪所有用npm安装的依赖（dependancy）。
```
npm init -y
```
为项目安装Tailwind
```
npm install -D tailwindcss
```
安装完成后，项目中会多出一个node_module文件夹和一个package-lock.json文件。
创建tailwind.config.js文件
```
npx tailwindcss init
```
在tailwind.config.js中添加内容文件路径：
```
./src/**/*.{html,js}
```

Set up Tailwind CSS>

Set up Tailwind CSS #

手动创建src文件夹和public文件夹
在src文件夹中创建input.css文件，并在该文件头部写入引用Tailwind的代码：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

打开package.json文件，找到"scripts":部分，删除原来的code，输入：

"build": "tailwindcss -i ./src/input.css -o ./public/main.css",
"watch": "tailwindcss -i ./src/input.css -o ./public/main.css --watch"

运行一次build-css脚本，在VS Code的终端中输入命令：
```
npm run build
```
这会在public文件夹下自动生成main.css文件。

Use Tailwind CSS in HTML>

Use Tailwind CSS in HTML #

在src文件夹下创建index.html，并在index.html的<head></head>中加入：
```
<link rel="stylesheet" href="public/main.css">
```
接下来可以试用Tailwind的一些class，比如：
```
<h1 class="text-3xl">Hello World</h1>
```
再用live server查看页面前，在VS Code的终端运行命令：
```
npm run watch
```
接下来就可以在Live Server中实时的看到页面中更改的变化了。

Reference>

Reference #