跳至主要內容

01 【Tailwind CSS 安装使用】

约 637 字大约 2 分钟...

01 【Tailwind CSS 安装使用】

**简介:**Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。

1.使用 CDN 快速体验 Tailwind CSS

使用 Play CDN 直接在浏览器中试用 Tailwind,无需任何构建步骤。Play CDN 仅用于开发目的,不是生产的最佳选择。

将 Play CDN 脚本标记添加到 HTML 文件的 ,然后开始使用 Tailwind 的实用工具类来设置内容的样式。<head>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="flex">
        <div class="flex-none w-14 h-14 bg-pink-500">1</div>
        <div class="flex-initial w-64 bg-red-700">2</div>
        <div class="flex-initial w-32 bg-green-50">3</div>
    </div>
</body>
</html>

2.使用 npm 安装 Tailwind CSS

第一步:安装 Tailwind CSS

安装 Tailwind CSS 并创建 tailwind.config.js 配置文件

mkdir demo
cd demo

# 安装 tailwindcss
npm install -D tailwindcss
# 初始化会生成 tailwind.config.js 配置文件
npx tailwindcss init

1)npm install -D tailwindcss 会生成文件及目录

node_modules package-lock.json package.json

2)npx tailwindcss init 生成如下配置文件

tailwind.config.js

第二步:编辑 tailwind.config.js 配置文件

添加文件到配置文件中

module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {},
 },
 plugins: [],
}

第三步:添加 Tailwind 样式指令到 CSS文件中

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

有警告的在vscode中安装PostCSS Language Support插件

第四步:使用 Tailwind Cli 构建 CSS样式

npx tailwindcss -i ./src/style.css -o ./dist/mystyle.css --watch

该命令会将 src/style.cssTailwind CSS 编译到 demo/dist/mystyle.css 文件中,mystyle.css 就是编译后样式,项目中引入的就是它。

现在打开 package.json 文件,添加以下运行脚本:

"scripts": {
  "build": "tailwindcss -i ./src/style.css -o ./dist/output.css --watch"
}

这时候只要运行npm run build就可以自动监听你的页面改动并且实时编译了。

第五步:小试牛刀

经过上面 4 个小步骤,Tailwind CSS 就已经安装好,下面就来瞅瞅。

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="../dist/output.css" rel="stylesheet">
</head>
<body>
 <h1 class="text-3xl font-bold underline text-yellow-100">
   Hello world!
 </h1>
</body>
</html>

自动刷新HTML文件

这是个题外话,不属于Tailwind CSS的范畴,如果你在写静态页面的时候,需要每次修改html页面,浏览器就自动刷新这个页面,那么只需要在vscode内搜索Live Preview并且安装,之后在你需要预览的页面,右键,选择Live Preview:Show Preview即可。

已到达文章底部,欢迎留言、表情互动~
  • 赞一个
    0
    赞一个
  • 支持下
    0
    支持下
  • 有点酷
    0
    有点酷
  • 啥玩意
    0
    啥玩意
  • 看不懂
    0
    看不懂
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8