VanillaJS 中安装 TailwindCSS

vanillaJS中安装tailwind

1. 安装 tailwindcss

2. 安装 postcss-cli

3. 安装 autoprefixer

4. 使用命令 npx tailwindcss init -p 进行项目初始化

5. 创建css文件夹并且在css文件夹中创建 style.css 文件

6. style.css 文件中书写

   1. @tailwind base;
   2. @tailwind components;
   3. @tailwind utilities;

7. 在package.json文件中的scripts对象中添加如下指令

   "watch":"postcss css/style.css -o dist/style.css --watch"
   //作用 : 在文件有变化的时候自动执行这行命令进行编译 
   //注意点 : 不添加 --watch 则不会监听执行, 而只是执行一次
   

8. 在终端中执行 npm run watch

9. 解释安装的插件的作用 :

   1. tailwindcss 是 tailwind 主要工具, 必须品
   2. postcss-cli 是处理 tailwind的输出工具
   3. autoprefixer 帮助浏览器添加 prefix 的工具

10. 在dist文件夹中创建index.html文件, 并且引入当前目录下的style.css

11. 通过npm安装 live-server

    1. live-server 是轻量的网页服务器

12. 终端中运行 live-server dist 则可以打开dist文件下的index.html文件

13. 推荐vscode插件 , tailwind css lntelliSense