zoukankan      html  css  js  c++  java
  • Tailwind CSS安装和构建的正确操作方式

    导语

    就在前段时间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}:的命名前缀以区分响应式类。

    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
    

    20201116065636.jpg
    然后一直回车,直到完成(大概10次左右)。

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

    npm init -y
    

    20201116070935.jpg

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

    安装tailwindcss扩展包

    npm install tailwindcss
    

    20201116074905.jpg
    这里我们可以看到,安装的是1.9.6版本。

    安装postcss-cli和autoprefixer扩展包

    npm install postcss-cli autoprefixer
    

    20201116104106.jpg

    将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
    

    20201116105903.jpg
    即可完成构建,这时候我们发现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>
    

    20201116110946.jpg

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

    20201116110954.jpg

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

    附原文:https://www.wjcms.net/archives/tailwindcss初体验之安装和构建

  • 相关阅读:
    PAT (Basic Level) Practise 1013 数素数
    PAT (Basic Level) Practise 1014 福尔摩斯的约会
    codeforces 814B.An express train to reveries 解题报告
    KMP算法
    rsync工具
    codeforces 777C.Alyona and Spreadsheet 解题报告
    codeforces 798C.Mike and gcd problem 解题报告
    nginx + tomcat多实例
    MongoDB副本集
    指针的艺术(转载)
  • 原文地址:https://www.cnblogs.com/wjcms/p/13985438.html
Copyright © 2011-2022 走看看