使用Laravel安装 Tailwindcss

maogu7个月前Tailwind263

创建Laravel项目

composer create-project laravel/laravel my-project

cd my-project

接下来使用命令安装Laravel的前端依赖 npm

npm install

设置Tailwind Css

Tailwind Css 需要NodeJs 12.13.0 或 最高版本

通过npm 安装Tailwind

使用一下命令 安装Tailwind 以及对等依赖 npm

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

创建您的配置文件

接下来生成 tailwind.config.js 文件

npx tailwindcss init

这将 tailwind.config.js 在项目的根目录创建一个最小文件

打开tailwind.config.js 文件中 ‘purge’使用所有Blade模版和JavasCript组建的路径配置该选项,一边Tailwind 可以在生产版本中摇晃未使用的样式;

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

使用Laravel Mix 配置Tailwind

   require('tailwindcss'),

在css中包含Tailwind

打开 ./resources/css/app.css 文件Laravel 默认生成使用 @tailwind命令 包含 Tailwind 的 base componets 和 utilties的样式 替换;

创建 resources/views/layouts/app.blade.php

然后加入引用css

    <link rel="stylesheet" href="{{asset('css/app.css')}}">

大功告成

npm run watch
npm run dev 
或者 
npm run prod 

此时css将混合到Laravel项目中使用了!

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。