使用npm安装Tailwind CSS步骤

  注意：涉及到命令全部是在项目根目录下执行

1.使用命令初始化package.json配置文件 命令：npm init -y

 结果：在项目根目录下生成package.json文件

2.安装tailwindcss扩展包 命令：npm install tailwindcss

 结果：在项目根目录下生成package-lock.json文件和node_modules文件夹，文件夹里面包含安装的tailwindcss扩展包

3.创建配置文件tailwind.config.js 命令：npx tailwindcss init

结果：在项目根目录下生成tailwind.config.js配置文件

 4.修改tailwind.config.js文件的content如下： content: [ './src/**/*.{html,js}', ], 注意：content里面配置的是项目中需要解析的html和js以及vue等文件

5.安装POSTCSS-CLI和AUTOPREFIXER扩展包 命令：npm install postcss-cli autoprefixer

结果：安装POSTCSS-CLI和AUTOPREFIXER扩展包到node_modules文件夹

 6.将TAILWIND添加到CSS 在项目目录css目录下，新建styles.css文件，styles.css内容如下： @tailwind base;

@tailwind components;

@tailwind utilities;

7.CSS构建 修改package.json文件的scripts如下：

"scripts": { "tailwind": "tailwindcss build src/css/styles.css -o src/public/styles.css" }

修改完成保存后，执行如下命令启动修改后的脚本命令tailwind 命令：npm run tailwind

结果：在src/public目录下生成了styles.css文件

 

8.引入楼上生成的styles.css文件到项目中

 

最终结果：