laravel 安装npm_Tailwind CSS安装和构建的正确操作方式

最新推荐文章于 2024-07-30 16:39:32 发布
最新推荐文章于 2024-07-30 16:39:32 发布
阅读量359 收藏 1
点赞数
文章标签： laravel 安装npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39975683/article/details/111698950
版权

导语

就在前段时间laravel更新了8.0版本，其中有一个新特性是Jetstream是Laravel的新应用程序支架，Jetstream使用Tailwind CSS，您可以在Livewire或Inertia之间进行选择。于是我就开始了tailwindcss研究之旅。

简介

一般的UI中CSS框架都是内建各种预设的组件，比如表单、按钮、菜单、模态框等，当需要通过定制化设计时，组件的高度耦合性则带来很大的弊端。Tailwind并不提供预先设计好的内建组件，而是提供了更为基础的工具类(utility classes)，可直接在HTML源码上构建完全定制化的设计。

Tailwind是一个CSS框架的工具集，Tailwind的理念是抽取共用体(Utilities First)。
Tailwind CSS是一个高度可定制的基础层CSS框架，提供了构建定制化所需的构建块，无需重新覆盖内建于框架内中的风格。

特性

  1. 响应式
    Tailwind CSS的每个工具类都支持响应式布局，使用类似:的命名前缀以区分响应式类。

  2. 组件友好
    仅需使用工具类(utility classes)即可，Tailwind从重复模式中提取组件的工具类。

  3. 可定制
    Tailwind CSS是基于PostCSS开发的，通过JavaScript代码配置。

核心

  1. 实用为主(Utility-First)
    传统的Web页面设计需手工为HTML元素编写CSS样式，使用Tailwind可以直接在HTML使用预先定义的类名来设置元素的样式。

  2. 自适应设计(Responsive Design)
    Tailwind中每个工具类均可有条件地应用到不同的断点(breakpoint)，默认情况下根据常见移动设备分辨率划分了4个断点，分别对应4个不同的媒体查询。

安装

使用CDN

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

注意：在使用CDN构建之前，请注意，如果没有将Tailwind集成到您的构建过程中，那么许多使Tailwind CSS强大的功能将不可用。

  • 您无法自定义Tailwind的默认主题

  • 你不能使用任何指令一样@apply，@variants等等。

  • 您无法启用以下功能 group-hover

  • 您无法安装第三方插件

  • 您不能摇晃未使用的样式

为了充分利用Tailwind，您确实应该通过npm安装它。

使用NPM进行安装

使用npm安装Tailwind CSS,需要在电脑线安装好node.js环境。这里不再讲怎么安装node,参考本博客的以前发布的文章。

初始化npm配置文件

使用命令初始化package.json配置文件

npm init

b42085d985f879c407562e40c7df5426.png
然后一直回车，直到完成(大概10次左右)。

或者还有更简单的方法，这里是不是应该写在前边的。(⊙o⊙)…

npm init -y

bfc622b53598feca0c293e6f15dd3dea.png

这样就初始化好了package.json配置文件。

安装tailwindcss扩展包

npm install tailwindcss

f67b44ecbb6e31d144924c66fa41d9dd.png
这里我们可以看到，安装的是1.9.6版本。

安装postcss-cli和autoprefixer扩展包

npm install postcss-cli autoprefixer

e025e7ad840dae42d88bdb74eb1c1a87.png

将Tailwind添加到CSS

使用@tailwind指令注入顺风的base，components和utilities风格为你的CSS：
在项目目录新建src目录，新建styles.css文件，包含如下内容。

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

css构建

修改package.json文件scripts如下：

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

在项目目录创建public文件夹。

然后运行命令

npm run tailwind

b49fd7819b96124aca2e2bb12c0f94ed.png
即可完成构建，这时候我们发现public文件夹内多了styles.css文件，在项目中引用测试一下。

<html lang="en"><head> <meta charset="UTF-8"> <title>tailwindcss测试title> <link rel="stylesheet" href="public/styles.css" />head><body class="w-full h-screen flex justify-center items-center"> <div class="w-32 h-32 bg-red-600 rounded-3xl">div>body>html>

10f766996df6d25a56b812dbb9216342.png

查看浏览器，得到如下效果，说明tailwindcss构建成功了~

3f0ae6af65e703761bb1427bcbd720a2.png

关注我，每天更新分享学习内容。

0a749f3eba97d042ee14587e63894cc4.png

weixin_39975683
关注
在 Laravel 中使用 Tailwind CSS
weixin_43814458的博客
06-13 1329
Tailwind Tailwind 是新的 CSS 实用程序框架，它很快成为我最喜欢的构建界面的方法。通常，尝试一个新的框架、包或语言的最困难的部分是建立起来。 建造 Tailwind 的人做了一项令人难以置信的工作，记录了这个过程，而且非常容易做到。但是，有时还是很高兴看到别人是怎么做到的。所以，让我们跳进去看看是怎么做到的。 入门 首先，假设我们开始一个新的 Laravel 项目。 我不会去介绍咋么设置它，你可以参考文档 点击这里。完成 Laravel 的所有设置之后，让我们看 Tailwind
Tailwind CSS安装和构建的正确操作方式
wjcms的博客
11-16 2952
导语 就在前段时间laravel更新了8.0版本，其中有一个新特性是Jetstream是Laravel的新应用程序支架，Jetstream使用Tailwind CSS，您可以在Livewire或Inertia之间进行选择。于是我就开始了tailwindcss研究之旅。 简介 一般的UI中CSS框架都是内建各种预设的组件，比如表单、按钮、菜单、模态框等，当需要通过定制化设计时，组件的高度耦合性则带来很大的弊端。Tailwind并不提供预先设计好的内建组件，而是提供了更为基础的工具类（utility cla
一个Laravel框架的TailwindCSS前端预设
08-08
一个Laravel框架的Tailwind CSS前端预设
npm laravel
weixin_39443141的博客
04-08 217
php artisan servenpm run watch
如何安装和使用Tailwind CSS
最新发布
sg_knight的专栏
07-30 599
Tailwind CSS 是一个实用的 CSS 框架，提供了大量预定义的类，帮助开发者快速构建美观的网页界面。以下将详细介绍如何在项目中安装和使用 Tailwind CSS。
Laravel开发-tailwindcss
08-27
Laravel开发-tailwindcss 将Tailwind CSS添加到项目中的Laravel预设
laravel npm安装yarn
weixin_30606669的博客
06-10 123
npm install -g yarn yarn install --no-bin-links yarn add cross-env npm run dev Laravel 默认集成了一些 NPM 扩展包,不安装是不行的 转载于:https://www.cnblogs.com/sgm4231/p/10999003.html...
laravel-preset:带有Laravel的带有Tailwind CSS的laravel预设启动程序UI
05-27
Laravel为TailwindCSS预设 :skateboard: 用于的Laravel前端脚手架预设-一种用于快速UI开发的实用程序优先CSS框架。 安装及使用 此软件包需要Laravel 7.0或更高版本。 全新安装Laravel和cd到您的应用程序。 安装...
mtv-stack:准系统使用Laravel Mix，TailwindCSS和VueJS构建文件
05-19
MTV堆栈 :guitar: 混合/逆风/ Vue 构建软件包包括： 这些文件已针对WordPress主题进行了预... Mix使您可以轻松地将它们添加回去，但是在熟悉Tailwind和Vue之后，您可能不会像您想的那样错过它们。 颜色在哪里？ 从T
推荐：Laravel框架中的Tailwind CSS工具
gitblog_00024的博客
05-26 405
推荐：Laravel框架中的Tailwind CSS工具 tailwindcss-laravelThis package wraps up the standalone executable version of the Tailwind CSS framework for a Laravel application.项目地址:https://gitcode.com/gh_mirrors/ta/...
tailwindcss：Laravel框架的Tailwind CSS前端预设
02-03
适用于Tailwind CSS的Laravel 7.0+前端预设 用于的Laravel前端脚手架预设-一种用于快速UI开发的实用程序优先CSS框架。 用法 全新安装Laravel> = 7.0和cd到您的应用程序。 通过composer require laravel-frontend-presets/tailwindcss --dev安装此预设。 Laravel将自动发现此软件包。 无需注册服务提供商。 一个。 对于没有身份验证的预设 使用php artisan ui tailwindcss进行基本的Tailwind CSS预设 npm install && npm run dev ph
laravel-tailwindcss-admin:在Laravel 8中安装Tailwindcss主题
05-06
关于Laravel Laravel是一个具有表达力，优雅语法的Web应用程序框架。 我们认为，发展必须是一种令人愉快的，富有创造力的经历，才能真正实现。 Laravel减轻了许多Web项目中使用的常见任务，从而减轻了开发过程中的痛苦，例如： 。 。 用于和存储的多个后端。 富有表现力，直观的 。 数据库不可知。 。 。 Laravel易于访问，功能强大，并提供大型，强大的应用程序所需的工具。 学习Laravel Laravel拥有所有现代Web应用程序框架中最广泛，最全面的和视频教程库，因此轻而易举地开始使用该框架。 如果您不想读书，可以使用Laracasts提供帮助。 Laracasts包含1500多个视频教程，涉及各种主题，包括Laravel，现代PHP，单元测试和JavaScript。 深入我们全面的视频库，提高您的技能。 Laravel赞助商 我们要感谢以下赞
laravel-mix-tailwind:mix.tailwind（）
05-25
Laravel混合尾风 此扩展为您的Mix（v2.1及更高版本）构建提供即时Tailwind支持。 用法 首先，安装扩展程序。 npm install laravel-mix-tailwind --save-dev 然后，在您的webpack.mix.js文件中要求它，如下所示： let mix = require ( 'laravel-mix' ) ; require ( 'laravel-mix-tailwind' ) ; mix . js ( 'resources/js/app.js' , 'public/js' ) . less ( 'resources/less/app.less' , 'public/css' ) . tailwind ( ) ; 下一步 该程序包需要tailwind.js，因此请不要忘记运行： npx tailwindcss
laravel-mix-tailwindcss:用于Laravel Mix的Tailwind CSS包装器
05-26
Laravel Mix Tailwind CSS 此扩展为您的Mix版本提供即时的Tailwind CSS支持。 请确保您使用的是laravel-mix 2.1或更高版本。 该软件包可与Tailwind 1.0或更高版本一起使用，但也可与早期版本一起使用。 用法 您可以使用npm或yarn安装软件包： npm install mix-tailwindcss --save-dev yarn add mix-tailwindcss --dev 然后在您的Mix配置中要求扩展名： const mix = require ( 'laravel-mix' ) ; require ( 'mix-tailwindcss' ) ; ... 通过在您的Mix链中调用tailwind()来启用扩展： mix . sass ( 'resources/sass/app.scss' , 'publ
livewire-datatables：使用Laravel，Livewire，Tailwind CSS和Alpine JS的高级数据表
02-04
Livewire数据表 产品特点 使用模型或查询构建器来提供数据 使用预设或自定义回调对列进行突变和格式化 使用列或计算列对数据排序 使用布尔值，时间，日期，选择内容或自由文本进行过滤 显示/隐藏列 要求 安装 您可以通过composer安装该软件包： composer require mediconesystems/livewire-datatables 可选的 您不需要，但是如果您愿意，可以发布配置文件和刀片模板资产： php artisan vendor:publish 这将使您能够修改刀片视图并应用自己的样式，数据表视图将发布到资源/ livewire /数据表中。 配置文件包含
laravel-moonlight:电池包括基于InertiaJS，VueJS和TailwindCSS堆栈的Laravel预设
04-14
Laravel月光 Laravel Moonlight是为您的下一个SPA应用程序精心设计的Laravel预设。 利用现有的服务器端框架来创建完全由客户端呈现的单页应用程序，而无需使用现代SPA带来的大量复杂性。 堆 （在JS中使用命名路由） 安装 使用composer安装： composer require titasgailius/laravel-moonlight 用法 安装软件包后，您可以使用ui Artisan命令安装脚手架： // Generate basic scaffolding php artisan ui moonlight // Include authentication scaffolding php artisan ui moonlight --auth 屏幕截图 项目结构 project │ - webpack.mix.js │ └───res
laravel项目中npm安装vue小结
weixin_34150503的博客
11-16 876
1、千万别用cnpm安装 血的教训，总有莫名其妙的问题 2、安装出错如何清空 rm -rf node_modules rm package-lock.json yarn.lock npm cache clear --force npm install 复制代码3、注册npm安装源及查看配置项 ## 1通过config命令（当前项目） npm config set registry https://...
使用Vue.js、Laravel和Tailwind CSS构建评论系统-（一）
哈哈哈
02-05 1454
初始化项目 composer create-project laravel/laravel comments 创建数据库，配置.env 文件。我这里的数据库是comments 使用系统自带的验证程序。 php artisan make:auth php artisan migrate 使用npm命令安装依赖和tailwindcss ...
laravel 通过npm搭建前端资源的注意事项
08-08 172
1.下载安装node.js [6的版本] 2.下载安装python2.7.*的版本 3.可以通过淘宝的npm进行相关的安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 在项目的文件夹下 cnpm install --save-dev node-sass 详细相关说明看：http://ww...
laravel 使用vue_使用Laravel和Vue.js构建留言簿
05-31
好的，关于使用Laravel和Vue.js构建留言簿，我可以提供一些基本的思路和步骤： 1. 创建Laravel项目 首先，需要创建一个Laravel项目作为后端，可以使用Laravel自带的命令行工具进行创建，例如： ``` laravel new ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值