Tailwind 小笔记

Posted 2022-02-01 Grace_Zhong

Tailwind 小笔记

• 从一个 .html 文件开始
• Tailwind Config 自定义样式
• 字体
• Margin / Padding / Border Width / Border Color

"tailwindcss": "^2.2.7"

从一个 .html 文件开始

1. 安装+配置 node.js

2. 初始化 package.json

   npm init -y
   

3. 安装 tailwind

   npm install tailwindcss
   

4. 新建 src/style.css

   ​```
   project
   │
   └───node_modules
   │   │
   │   └───.bin
   │        ...
   │   
   └───public
   │   │   index.html
   │   │   style.css  
   │   
   └───src
   |   │   style.css
   |
   │   package.json
   │   package-lock.json   
   ​```
   

5. package.json 中修改 “scripts”

   "scripts": 
       "build-css": "tailwindcss build src/styles.css -o public/style.css"
     ,
   

6. 在 terminal 中运行 npm run build-css, public 中会出现 style.css

7. public/index.html 中使用 public/style.css

   <link rel="stylesheet" href="style.css" type="text/css">
   

   此时打开 live-server，所有样式会变成浏览器默认样式

Tailwind Config 自定义样式

npx tailwindcss init --full

1. 项目目录中会出现 tailwind.config.js, 保存着 tailwind 的默认样式
2. 将 tailwind.config.js 改名为 tailwind-default.config.js
3. 命令行输入

npx taiwindcss init

字体

• 大小：text-6xl
• 颜色：text-gray-800
• 粗细: font-semibold font-bold font-light
• 大小写 uppercase

Margin / Padding / Border Width / Border Color

• padding: p-4

• padding top: pt-4

• padding bottom: pb-4

• padding left: pl-4

• padding right: pr-4

• padding top & bottom: py-4

• padding left & right: px-4
  
  

• margin: m-4

• margin top: mt-4

• margin bottom: mb-4

• margin left: ml-4

• margin right: mr-4

• margin top & bottom: my-4

• margin left & right: mx-4
  
  

• border 1px: border

• border 0px: border-0

• border 2px: border-2

• border left 2px: border-l-2
  
  

• border red: border-red-100