Wepack 引入 Tailwindcss，并且消除 css rules 报错 Wepack 引入 Tailwindc

Wepack 引入 Tailwindcss

项目初始化并创建 `package.json`

pnpm init -y

创建 src 文件夹

创建一个名为 src 的文件夹并添加一个空的 index.js 文件。 webpack 编译的代码放入此处，包括所有 Javascript 模块和主 Tailwind 文件。

安装 Tailwind

pnpm i -D tailwindcss

安装 Webpack & Loaders

npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader postcss postcss-loader postcss-preset-env

### 在根目录中创建 webpack.config.js 并将其添加到其中...

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /.css$/i,
        include: path.resolve(__dirname, 'src'),
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
}

添加 Tailwind ### 指令

在 src 文件夹中创建 main.css 并添加以下 3 行

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

创建 tailwind.config.js 文件并将其添加到其中

module.exports = {
  content: ['./dist/*.html'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

PostCSS 相关配置

在根目录中创建一个名为 postcss.config.js 的文件并添加以下内容

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    'postcss-preset-env',
    tailwindcss
  ],
};

将此行添加到您的 src/index.js

import './main.css';

创建一个 dist/index.html 文件并添加以下内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack App</title>
  </head>
  <body>
    <h1 class="text-4xl text-blue-700">My Webpack + Tailwind App</h1>
    <script src="bundle.js"></script>
  </body>
</html>

### 将脚本添加到 package.json

将以下内容添加到您的 package.json 文件中

"scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  },

运行你的 webpack 服务器

要构建一次并创建 dist/bundle.js 文件，请运行

npm run build

To run your webpack server

npm run dev

当然，项目到这里已经可以运行了，不过，如果你有强迫症的话请继续看下去

消除 vscode Unknown at rule @tailwindcss(unknownAtRules)

当我们打开 main.css 发现 vscode 有以上报错，这是因为 css这个文件不知道这条规则，我们可以采用以下方法解决：

在项目的根目录下创建 .vscode ，并命名为两个文件

settings.json
tailwind.json

更新 settings.json 文件

{
 "css.customData": [".vscode/tailwind.json"]
}

更新 tailwind.json 文件

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}

还有其它方法也可以消除提示，可参考

How to Fix unknownAtRules Warnings From Tailwind CSS - Code Concisely --- 如何修复来自 Tailwind CSS 的unknownAtRules 警告 - 代码简洁

好啦，今天的内容就到分享这里啦，很享受与大家一起学习，沟通交流问题，如果喜欢的话，请为我点个赞吧！👍

作者：chenuvi

邮箱： chenui@outlook.com

plus (最近求职中，球推）

Wepack 引入 Tailwindcss， 并且消除 css rules 报错