Tailwind CSS 对 Laravel 的支持及开发配置


本章节目录

    配置脚手架项目

    和其它课程一样,我们将采用 laravel-feedback 项目做为脚手架项目,进行实战的演示和讲解。
    下载 laravel-feedback 源码,地址:

    Gitee 地址:https://gitee.com/malajiang/laravel/tree/master/laravel-feedback
    Github 地址:https://github.com/malajiang/laravel/tree/master/laravel-feedback

    参考文章:使用 Laradock 配置并运行一个 Laravel 站点(https://www.malajiang.com/special/show/26) 完成站点的配置。目录名为laravel-feedback-tailwindcss

    Tailwind CSS 的安装与配置

    基础设置

    在 laravel-feedback-tailwindcss 项目根目录下

    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
    

    执行以下代码初始化 tailwindcss,系统会自动在根目录下生成 tailwind.config.js 文件

    npx tailwindcss init
    

    打开 tailwind.config.js 文件,为 purge 做以下设置:

    purge: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        ],
    

    引入组件样式

    打开 /resources/css/app.css 文件,引入以下代码:

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

    Laravel Mix 的配置

    Laravel Mix 是 Laravel 内置的强大的前端资源预处理器。在这里只需要做好以下配置即可,无需做其它任何设置即可开始工作。

    mix.js('resources/js/app.js', 'public/js')
        .postCss('resources/css/app.css', 'public/css', [
            require("tailwindcss"),
        ]).version();
    

    安装 Laravel Mix

    在项目根目录下执行以下命令

    npm install
    

    安装完成后,我们就可以开始使用 Laravel Mix 管理前端资源了,这里我们需要记住以下三个常用的命令。

    • npm run watch 监听 CSS 和 JS 文件的变动,并自动打包编译。
    • npm run dev 执行编译任务
    • npm run prod 生成生产环境所用的 Mix 任务资源,并做最小化输出。

    还有其它命令,具体设置在 package.json 文件夹

    配置完成后,下一章节,我们正式开肝。


    请先 登录
    审核后显示
    讨论记录(0 条)
    暂时还没有讨论

    © 2024 麻辣讲 豫ICP备19017310号-2