如果想快速使用与把玩一下 Tailwind CSS,官方有提供一个 CDN,直接放到 link
就可以了。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
但官方其实不太推荐这种用法,原因如下:
@apply
,@variants
...等。group-focus
。好的!官方都说五个不能了,如果只想汇入 CDN 这条路应该就仅限於不想客制化网站一途了,那这样就失去使用 Tailwind 的意义。
官方文件中在不能五大理由下方还有提到一句话:
如果要使用更多 Tailwind,应该要安装 PostCSS 套件。
首先先进入开启好专案的资料夹,然後点选右键开启终端机,这时候会看到路径已经在自己的资料夹中,
官方教学使用 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"
}
}
因为我想要自订义未来 Tailwind 的安装内容,可以使用 Tailwind 工具生成一份配置文件,此命令工具已经包含在 tailwindcss 内。
在终端机输入指令
npx tailwindcss init
安装完成後就会看到有一个 tailwind.config.js 的档案在目录底下。
点进档案後就会看到预设的配置内容。
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
在 VSCode 中新增一个 CSS 档案,命名就如官方推荐的 style.css
。(依照专案可自订义此名字)
再把 Tailwind 的三个核心复制贴到刚刚新建的 CSS 档案中。
@tailwind base;
@tailwind components;
@tailwind utilities;
虽然官方强力推荐要搭配 PostCSS,但因为还要去了解 PostCSS 没有那麽容易,所以为了达到比较无障碍的使用,就不依赖 PostCSS 来使用,可以输入下方指令,就可以将 Tailwind 编译成浏览器看得懂的 CSS,完成後就可以直接使用 Tailwind 了!
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.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: [],
};
在一般专案里,一定会有很多个 .java 跟 .class 档案,那我们要怎麽去管理这两种档案呢? ...
自从犯贱跑去参加ML新手的 Kaggle ML 30days ,脱了层皮後,开始回想一些在 in-c...
浮动与清除浮动 float为浮动属性,用来调整元素的布局。常用left、right两个值来使元素靠左...
在开始之前我想先推荐几个来源对於写 Rails 测试颇有帮助的几个网站也是我个人在开始写之前有看过的...
随着新的科技环境变化, 资讯安全也会变得更多面向。 根据NIST(美国国家标准暨技术研究院)定义的电...