TailwindCSS 从零开始 - 起手式

tailwindcss

使用 CDN 载入 Tailwind CSS

如果想快速使用与把玩一下 Tailwind CSS,官方有提供一个 CDN,直接放到 link 就可以了。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

但官方其实不太推荐这种用法,原因如下:

use cdn

  1. 不能自订义 Tailwind 的预设主题。
  2. 不能使用任何指令,像是 @apply@variants...等。
  3. 不能启用其他的 variants,像是 group-focus
  4. 不能安装第三方套件。
  5. 不能 tree-shake 未使用到的样式。

好的!官方都说五个不能了,如果只想汇入 CDN 这条路应该就仅限於不想客制化网站一途了,那这样就失去使用 Tailwind 的意义。

安装 Tailwind

官方文件中在不能五大理由下方还有提到一句话:

如果要使用更多 Tailwind,应该要安装 PostCSS 套件。

使用 NPM 安装

首先先进入开启好专案的资料夹,然後点选右键开启终端机,这时候会看到路径已经在自己的资料夹中,

terminal

官方教学使用 NPM 来安装 Tailwind CSS、PostCSS,还有 autoprefixer 这三个档案。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

安装原因:

Tailwind 不会自动加上浏览器前缀词到产生的 CSS 中,所以浏览器无法读取 CSS,要加上 autoprefixer 这个套件去处理此问题,所以一行指令就三个安装好了,轻松愉快。

还有提到一个错误,但是 v2.0 版本的 Tailwind 依赖於 PostCSS 8,若将 Tailwind 与旧版本的 PostCSS 混合使用,可能会看到以下跳错讯息:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

这时请安装 PostCSS 7 版本,才能兼容。

安装 PostCSS 7

npm uninstall tailwindcss
npm install tailwindcss@npm:@tailwindcss/postcss7-compat

这时候打开 IDE,会看到目录中有一个 package.json 档案,就会看到刚刚装好的三个套件。

package.json

{
  "dependencies": {
    "autoprefixer": "^10.2.6",
    "postcss": "^8.3.0",
    "tailwindcss": "^2.1.4"
  }
}

建立 tailwindcss.config 档案

因为我想要自订义未来 Tailwind 的安装内容,可以使用 Tailwind 工具生成一份配置文件,此命令工具已经包含在 tailwindcss 内。

在终端机输入指令

npx tailwindcss init

tailwindcss init

安装完成後就会看到有一个 tailwind.config.js 的档案在目录底下。

menu

点进档案後就会看到预设的配置内容。

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

新增 Tailwind 到 CSS 中

在 VSCode 中新增一个 CSS 档案,命名就如官方推荐的 style.css。(依照专案可自订义此名字)

再把 Tailwind 的三个核心复制贴到刚刚新建的 CSS 档案中。

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

不依赖 PostCSS 使用 Tailwind

虽然官方强力推荐要搭配 PostCSS,但因为还要去了解 PostCSS 没有那麽容易,所以为了达到比较无障碍的使用,就不依赖 PostCSS 来使用,可以输入下方指令,就可以将 Tailwind 编译成浏览器看得懂的 CSS,完成後就可以直接使用 Tailwind 了!

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

tailwindcss

看到上方画面就代表成功罗!

帮 CSS 瘦身

承上所示,Tailwind 因为是 Utility 的关系,会把整包档案汇入,但我可能这次专案没有用到这麽多的 Utility,如果整包档案要选染於网页,效能就会低落,Tailwind 官方文件很贴心也提供可以瘦身的方法,选到 tailwind.config.js 档案,将我可能会使用到的内容写在 purge 属性内,就可以去监听我哪支档案有使用到,只会编译使用的档案,真的很贴心呢!

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: ["./**/*.html"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

参考资料


<<:  [Day 8] SRE - 火炎焱燚之保卫战

>>:  DAY16 - 并查集

SOURCEPATH 能帮助我们什麽呢?

在一般专案里,一定会有很多个 .java 跟 .class 档案,那我们要怎麽去管理这两种档案呢? ...

为什麽会跑来这里写这题目

自从犯贱跑去参加ML新手的 Kaggle ML 30days ,脱了层皮後,开始回想一些在 in-c...

视觉设计(3)

浮动与清除浮动 float为浮动属性,用来调整元素的布局。常用left、right两个值来使元素靠左...

Day02 测试写起乃 - Rails 测试推荐资源

在开始之前我想先推荐几个来源对於写 Rails 测试颇有帮助的几个网站也是我个人在开始写之前有看过的...

【Day2】Information Security Overview

随着新的科技环境变化, 资讯安全也会变得更多面向。 根据NIST(美国国家标准暨技术研究院)定义的电...