技术文献

一、安装tailwindcss3

npm init -y

npm install -D tailwindcss@3

npm install -D tailwindcss //这个命令是安装最新版，如果是安装了最新版（超过3.0版本），npx tailwindcss init这个命令就是失效了，官方移走了本命令，所以无法生成tailwind.config.js文件。

二、修改es模式

package.json=>"type": "module"

三、生成tailwind.config.js文件

npx tailwindcss init //注：如果是安装了最新版（超过3.0版本），npx tailwindcss init这个命令就是失效了，官方移走了本命令

四、安装其他插件

如果有限应用的cdn的tailwindcss带有其他插件：<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
自动带插件：forms和container-queries

//安装其他插件
npm install -D @tailwindcss/forms @tailwindcss/container-queries

五、修改tailwind.config.js代码

==tailwind.config.js代码==
/** @type {import('tailwindcss').Config} */
import forms from '@tailwindcss/forms'
import containerQueries from '@tailwindcss/container-queries'

export default {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {},
 },
 plugins: [
   forms,
   containerQueries,
 ],
}

六、修改input.css代码

==input.css代码==
@tailwind base;
@tailwind components;
@tailwind utilities;
/* cyrillic-ext */
@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   src: url(./fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0I5nvwUgHU.woff2) format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   src: url(./fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0I5nvwUgHU.woff2) format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

七、执行tailwindcss监控编译

npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch