如何开始使用TailwindCSS新建一个项目

编辑

tailwindcss 3.0已经正式发布。安装方式也有一些改变。此贴将对3.0的安装方式做一些说明。

安装 Tailwind CSS

tailwindcss 通过 npm 安装,并创建您的 tailwind.config.js 文件。

npm install -D tailwindcss
npx tailwindcss init

配置您的模板路径

tailwind.config.js 文件中添加所有模板文件的路径。

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

Tailwind 指令添加到您的 CSS

创建一个css文件,位置随意,比如src/main.css,并且将内容修改为如下:

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

开始在您的 HTML 中使用 Tailwind

将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind 来设置您的内容样式。

<!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">
    Hello world!
  </h1>
</body>
</html>

创建构建命令

运行以下命令

npm init -y

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

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

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

自动刷新HTML文件

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

生成min版css

npx tailwindcss -o ./cssjs/tailwind.min.css --minify

文章转自https://wyz.xyz/d/306-tailwind-30tailwind-css

评论区

暂无评论,快来抢沙发