乐伊分享

ThinkPHP 6.0 配置 tailwindcss

===============

配置好环境后添加以下文件到目录

> 1.package.json

```

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    }
}

```

> 2.安装组件包

```

cnpm add cross-env --save-dev 
cnpm add laravel-mix --save-dev
cnpm add tailwindcss --save-dev
cnpm add vue-template-compiler --save-dev
//安装后之后运行
npx tailwindcss init
//目录下会产生一个tailwind.config.js的文件 打开文件在purge段添加以下内容
purge: {
    preserveHtmlElements: false,
    enabled: false,//生产环境修改为true打包压缩清理
    content: ['./view/**/*.html'],
  },

```

> 3.创建文件webpack.mix.js,写入以下内容

```

const mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .options({
       processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')]
    });

```

在resources/js目录创建相应的文件。