Tailwind CSS

taillwind Css

相关文档：乌鸦嘴：https://doc.wyz.xyz

乌鸦嘴中文文档：https://tailwind.wyz.xyz/docs/installation

官网：https://tailwindcss.com/docs/installation

一、安装 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 文件，添加以下运行脚本：

—minify 压缩生成的css代码

"scripts": {
  "build": "npx tailwindcss -i ./assets/css/tailwend.css -o ./dist/output.css --minify --watch"
}

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

六、自动刷新HTML文件

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

七、插件的使用

taillwindcss 本身就是依赖于postcss

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('postcss-preset-env')({
      features: { 'nesting-rules': false }
    }),
  ]
}

八、faq

注意：在写taillwindcss的时候，class名不要存在空格，一般有空格的情况会用 ‘’_‘’ 替代

1、自定义尺寸大小（重要）

h-[100px] //颜色边框都是这样设置

2、使用变体设置结构伪类

这里的选择器部分注意 “*”

//伪类
[&_a:hover]:brightness-150


last:[&_li]:mr-[0]
//子类选择器
[&>*:nth-child(n)]:mr-[71px] [&>:last-child]:mr-[14px]
//后代选择器空格使用 _ 代替
[&_td]:text-[#585858]
<div class="
  [&>*]:underline
  [&>p]:mt-0
"></div>

//_代表后代选择器
[&_.desc]:text-[12px]

<div class="grid gap-20 grid-cols-[repeat(2,48%)] [&>.item]:min-h-[150px] ">
    <div class="item"></div>
</div>

//使用伪类
 <div class="first:[&_table_tbody_tr_td]:w-[30%]"></div>

//渐变
 <div class="cm-bg-[linear-gradient(180deg,rgba(65,50,111,0.80)49.91%,rgba(2,33,14,0.00)99.87%)]"></div>

3、伪类的使用（重要）

before:content['']

4、important设置

前面加个！就可以了

<div class="!collapse"></div>

5、tailwind 使用前缀

group 需要前缀，但是 group-hover 不需要前缀
动作hover、或者伪类、还是断点 md 都不需要添加

<div class="group">
  <div class="group-hover:text-gray-500"> </div>
</div>

<div class="group/edit">
  <div class="group-hover/edit:text-gray-700"> </div>
</div>
{--用来做判断，group 是否包含 is-published 这个类，如果包含的话设置block --}
<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

九、常见警告和错误

1、`theme('spacing[some_key][1.5]')`

1、theme('spacing[some_key][1.5]') is an invalid theme value – perhaps you meant to write theme('spacing[1.5]')?

这个警告【还有内存问题】的问题在于tailwindcss 扫描的html

"../Todd/*.{html,js}", 如果Todd下包含node_module 文件夹的话，也会扫描的，所以要注意避开扫描 node_module 文件夹

module.exports = {
  content: [
      //避免使用 "../Todd/**/*.{html,js}",
      "../Todd/*.{html,js}",
      "../Todd/common/*.{html,js}",
  ],
}