关于php:Tailwind-CSS安装和构建的正确操作方式

51次阅读

共计 2030 个字符，预计需要花费 6 分钟才能阅读完成。

导语

就在前段时间 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 的每个工具类都反对响应式布局，应用相似 {screen}: 的命名前缀以辨别响应式类。

  1. 组件敌对

仅需应用工具类（utility classes）即可，Tailwind 从反复模式中提取组件的工具类。

  1. 可定制

Tailwind CSS 是基于 PostCSS 开发的，通过 JavaScript 代码配置。

外围

  1. 实用为主（Utility-First）

传统的 Web 页面设计需手工为 HTML 元素编写 CSS 款式，应用 Tailwind 能够间接在 HTML 应用事后定义的类名来设置元素的款式。

  1. 自适应设计（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


而后始终回车，直到实现 (大略 10 次左右)。

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

npm init -y

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

装置 tailwindcss 扩大包 

npm install tailwindcss


这里咱们能够看到，装置的是 1.9.6 版本。

装置 postcss-cli 和 autoprefixer 扩大包 

npm install postcss-cli autoprefixer

将 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


即可实现构建，这时候咱们发现 public 文件夹内多了 styles.css 文件，在我的项目中援用测试一下。

<!DOCTYPE html>
<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>

查看浏览器，失去如下成果，阐明 tailwindcss 构建胜利了~

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

附原文：https://www.wjcms.net/archive…

正文完
php
发表至： php
2020-11-16
 0
关于php:2021年WordPress博客装修美化二
关于php:前端面试每日-31-第838天
关于php:leetcodeDay1
关于php:PHP中的输出缓冲控制