Tailwind CSS入门教程-Toy模板网

这篇具有很好参考价值的文章主要介绍了Tailwind CSS入门教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Tailwind CSS入门教程,css,前端,图形渲染,人工智能,javascript

一、前言

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind是一款CSS框架，它的主要特点是提供了一系列的CSS类，可以快速地构建出各种样式。Tailwind的发展历史可以追溯到2017年，由Adam Wathan、Steve Schoger和Jonathan Reinink共同创建。Tailwind的设计理念是提供一系列的原子类，每个类都只包含一个具体的样式，通过组合这些类来构建出复杂的样式。这种设计理念可以让开发者更加灵活地控制样式，同时也可以减少样式冗余，提高代码的可维护性。
Tailwind的主要特点包括：

提供了一系列的原子类，可以快速地构建出各种样式。
可以通过配置文件来自定义样式，包括颜色、字体、边框等。
支持响应式设计，可以根据不同的屏幕尺寸来应用不同的样式。
支持插件机制，可以扩展框架的功能。
提供了一些实用的工具类，如布局类、间距类、文本类等，可以帮助开发者更快地构建页面。

总的来说，Tailwind是一款非常实用的CSS框架，可以帮助开发者更快地构建页面，同时也可以提高代码的可维护性。

项目源码：tailwind

二、基础教程上

2.1 颜色

white, black, red, green, blue, orange, yellow, purple, lime, emerald, teal, cyan, indigo, violet, fuchsia, pink, rose, sky, gray, slate, zinc, neutral, stone, amber

<!-- Default colors -->
    <!-- white, black, red, green, blue, orange, yellow, purple, lime, emerald, teal, cyan, indigo, violet, fuchsia, pink, rose, sky, gray, slate, zinc, neutral, stone, amber,  -->

    <!-- Text Colors -->
    <p class="text-black">Tailwind is awesome</p>
    <p class="text-red-50">Tailwind is awesome</p>
    <p class="text-red-100">Tailwind is awesome</p>
    <p class="text-red-200">Tailwind is awesome</p>
    <p class="text-red-300">Tailwind is awesome</p>
    <p class="text-red-400">Tailwind is awesome</p>
    <p class="text-red-500">Tailwind is awesome</p>
    <p class="text-red-600">Tailwind is awesome</p>
    <p class="text-red-700">Tailwind is awesome</p>
    <p class="text-red-800">Tailwind is awesome</p>
    <p class="text-red-900">Tailwind is awesome</p>

    <!-- Background Colors -->
    <div class="bg-slate-600">
      <p class="text-white">Tailwind is awesome</p>
    </div>
    <div class="bg-zinc-400">
      <p class="text-white">Tailwind is awesome</p>
    </div>
    <div class="bg-emerald-600">
      <p class="text-white">Tailwind is awesome</p>
    </div>

    <!-- Text Underline -->
    <p class="underline text-red-700 decoration-red-700">Tailwind is awesome</p>
    <p class="underline text-blue-700 decoration-blue-700">
      Tailwind is awesome
    </p>

    <!-- Border Colors -->
    <input class="border-2 border-rose-500" />
    <input class="border-2 border-blue-300" />
    <input class="border-2 border-purple-900" />
    <input class="border-2 border-yellow-500" />

    <!-- Divide Colors -->
    <div class="divide-y divide-blue-200">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
    </div>

    <!-- Outline Colors -->
    <button class="outline outline-blue-500">Subscribe</button>
    <button class="outline outline-purple-300">Subscribe</button>
    <button class="outline outline-gray-500">Subscribe</button>

    <!-- Box Shadow Colors (Opacity defaults to 100, but you cans set it)-->
    <button class="bg-cyan-500 shadow-lg shadow-cyan-500">Subscribe</button>
    <button class="bg-blue-500 shadow-lg shadow-blue-500/50">Subscribe</button>
    <button class="bg-indigo-500 shadow-lg shadow-indigo-500/50">
      Subscribe
    </button>

    <!-- Accent Colors -->
    <input type="checkbox" class="accent-purple-500" checked /> Option 1
    <input type="checkbox" class="accent-pink-500" checked /> Option 2
    <input type="checkbox" class="accent-red-300" checked /> Option 3

    <!-- Arbitrary Colors -->
    <div class="bg-[#427fab] h-10">Hello</div>
    <div class="text-[#427fab] h-10">Hello</div>
    <div class="border border-[#427fab] h-10">Hello</div>

2.2 边距

2.2.1 container

container	None	width: 100%;
sm (640px)	    max-width: 640px;
md (768px)	    max-width: 768px;
lg (1024px)	    max-width: 1024px;
xl (1280px)	    max-width: 1280px;
2xl (1536px)	  max-width: 1536px;

2.2.2 margin

    <div class="bg-slate-100 m-2">Hello Tailwind</div>
    <div class="bg-slate-100 mx-10">Hello Tailwind</div>
    <div class="bg-slate-100 my-10">Hello Tailwind</div>
    <div class="bg-slate-100 ml-4">Hello Tailwind</div>
    <div class="bg-slate-100 mt-4">Hello Tailwind</div>
    <div class="bg-slate-100 mr-4">Hello Tailwind</div>
    <div class="bg-slate-100 mb-4">Hello Tailwind</div>
    <div class="bg-slate-100 mt-[20px]">Hello Tailwind</div>

数值 m-1 margin: 0.25rem; /* 4px */ 默认值，可以修改 1rem = 16px

2.2.3 padding

  <div class="bg-slate-100 p-2">Hello Tailwind</div>
  <div class="bg-slate-100 px-10">Hello Tailwind</div>
  <div class="bg-slate-100 py-10">Hello Tailwind</div>
  <div class="bg-slate-100 pl-4">Hello Tailwind</div>
  <div class="bg-slate-100 pt-4">Hello Tailwind</div>
  <div class="bg-slate-100 pr-4">Hello Tailwind</div>
  <div class="bg-slate-100 pb-4">Hello Tailwind</div>
  <div class="bg-slate-100 pt-[20px]">Hello Tailwind</div>

2.2.4 space

    <!-- Space Between X -->
    <div class="flex mt-10 space-x-24">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
    </div>
    <!-- Space Between Y -->
    <div class="flex flex-col mt-10 space-y-4">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
    </div>

2.3 排版

Font Family
https://fonts.google.com/

	<script>
    tailwind.config = {
      theme: {
        fontFamily: {
          sans: ['ui-sans-serif', 'system-ui'],
          serif: ['ui-serif', 'Georgia'],
          mono: ["ui-monospace", "SFMono-Regular"],
          custom: ['Roboto']
        }
      }
    }
  </script>

Font Family 可以使用内置的字体或者自定义的字体
Font Size 设置文字的大小
Font Weight 设置文字的粗细
Letter Spacing 设置文字的间距
Text Alignment 设置文字左、居中、右
Text Decoration 用于设置文本的装饰效果，例如下划线、删除线、上划线等
Decoration Style 设置样式
Decoration Offset 用于设置文本装饰线与文本本身之间的距离
Text Transform 用于设置文本的大小写转换方式

2.4 尺寸

设置元素的宽高 w-8 h-8
w-screen 设置视口 w-full设置100%
可设置最大最小尺寸

2.5 定位

子绝父相
inset-y-0 意思是 top 0 bottom 0
浮动元素 left right（用的少）
display: block;：将元素显示为块级元素，即元素会在页面中独占一行，并且可以设置宽度、高度、内边距和外边距等属性。常用于页面布局中的容器元素，例如 div、p、h1 等。
display: inline-block;：将元素显示为行内块级元素，即元素会在一行中显示，并且可以设置宽度、高度、内边距和外边距等属性。常用于页面布局中的容器元素，例如 button、input 等。
display: inline;：将元素显示为行内元素，即元素会在一行中显示，并且不可以设置宽度、高度、内边距和外边距等属性。常用于页面中的文本元素，例如 a、span、em 等。

2.6 阴影

颜色渐变

<!-- Gradients -->
  <div class="h-24 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
  <div class="h-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

  <div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-blue-500/50">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
    deleniti iusto delectus alias natus quam dolor explicabo quas eius!
  </div>

在Tailwind CSS中，可以使用 shadow 类名来设置元素的阴影效果
shadow 类名可以与以下的修饰符一起使用，以便更好地控制阴影的大小和颜色

2.7 边框

边框可以设置大小、颜色、方位、边角、边框偏移量

2.8 滤镜（filter）

CSS中，可以使用 filter 属性来为元素添加滤镜效果。常用的滤镜属性包括：

blur()：用于为元素添加高斯模糊效果，其中括号中的值表示模糊半径，取值范围为0到正无穷大。
brightness()：用于为元素添加亮度效果，其中括号中的值表示亮度值，取值范围为0到正无穷大。
contrast()：用于为元素添加对比度效果，其中括号中的值表示对比度值，取值范围为0到正无穷大。
grayscale()：用于为元素添加灰度效果，其中括号中的值表示灰度值，取值范围为0到1。
hue-rotate()：用于为元素添加色相旋转效果，其中括号中的值表示旋转角度，取值范围为0到360度。
invert()：用于为元素添加反转颜色效果，其中括号中的值表示反转颜色的程度，取值范围为0到1。
opacity()：用于为元素添加透明度效果，其中括号中的值表示透明度值，取值范围为0到1。
saturate()：用于为元素添加饱和度效果，其中括号中的值表示饱和度值，取值范围为0到正无穷大。
sepia()：用于为元素添加褐色效果，其中括号中的值表示褐色值，取值范围为0到1。

需要注意的是，滤镜属性可以组合使用，以便实现更加复杂的效果。

三、基础教程下

3.1 伪类元素

在Tailwind CSS中，可以使用伪类元素来为元素添加特殊的样式。常用的伪类元素包括 :hover、:focus、:active 等
父子元素可以通过group属性自动向下触发
appearance-none重置默认元素样式
resize是CSS中的一个属性，用于控制元素是否可以被用户调整大小
Smooth Scroll 平滑过渡属性

3.2 媒体查询

    sm	640px	  @media (min-width: 640px) { ... }
    md	768px	  @media (min-width: 768px) { ... }
    lg	1024px	@media (min-width: 1024px) { ... }
    xl	1280px	@media (min-width: 1280px) { ... }
    2xl	1536px	@media (min-width: 1536px) { ... }

在CSS中，可以使用媒体查询（Media Queries）来根据设备的特性（如屏幕宽度、高度、分辨率等）来为不同的设备设置不同的样式
tailwind 使用更加方便的md:类名方式进行适配

3.3 Columns

columns 是一个用于创建网格布局的类名。columns 类名可以与数字（1到12）组合使用，以便更好地控制网格的列数。

3.4 flex布局

和css 使用的布局差不多，可以设置列、行。使用order可以二次设置元素的方向

Flex 布局语法教程 | 菜鸟教程

flex-none：将元素的flex属性设置为 none，表示该元素不会随着容器的大小而改变大小，即不会发生伸缩。
flex-initial：将元素的flex属性设置为 0 1 auto，表示该元素可以缩小但不能放大，同时会考虑元素的初始大小。
flex-auto：将元素的flex属性设置为 1 1 auto，表示该元素可以根据容器的大小自动伸缩，同时会考虑元素的初始大小。
flex-1：将元素的flex属性设置为 1 1 0%，表示该元素可以根据容器的大小自动伸缩，同时会忽略元素的初始大小。

3.5 grid布局

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 bg-gray-300 ">
    <div class="p-10 border border-blue-600 bg-blue-100 md:row-span-2 md:col-span-2">item 1</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 2</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 3</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 4</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 5</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 6</div>
    <div class="p-10 border border-blue-600 bg-blue-100 md:row-span-2  md:col-span-2">item 7</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 8</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 9</div>
    <div class="p-10 border border-blue-600 bg-blue-100 md:col-span-3">item 10</div>
  </div>

grid-col 设置全局列，grid-row设置全局行
col-span 设置当前元素可以占几个，row-span同理

3.6 动画

//自定义数值
<script>
    tailwind.config = {
      theme: {
        extend: {
          transitionDuration: {
            0: '0ms',
            5000: '5000ms',
          },
        },
      },
    }
  </script>

Tailwind CSS 的 transition 类是用于设置 CSS 过渡效果的类。它可以让元素在状态改变时平滑地过渡到新状态，而不是突然地改变。
transition 类可以用于设置以下 CSS 属性的过渡效果：

opacity：元素的不透明度
background-color：元素的背景颜色
border-color：元素的边框颜色
box-shadow：元素的阴影效果
transform：元素的变换效果，如旋转、缩放、位移等

transition 类可以与其他 Tailwind CSS 类组合使用，以设置过渡效果的持续时间、速度曲线、延迟等。例如，可以使用 duration-500 类设置过渡效果的持续时间为 500 毫秒，使用 ease-in-out 类设置速度曲线为缓进缓出，使用 delay-100 类设置延迟 100 毫秒后再开始过渡效果。

3.7 关键帧

<script>
    tailwind.config = {
      theme: {
        extend: {
          animation: {
            'spin-slow': 'spin 3s linear infinite',
            'wiggle': 'wiggle 1s ease-in-out infinite',
          },
          keyframes: {
            wiggle: {
              '0%, 100%': { transform: 'rotate(-12deg)' },
              '50%': { transform: 'rotate(12deg)' },
            },
          }
        }
      }
    }
  </script>

Tailwind CSS 的 animate 类是用于设置 CSS 动画效果的类。它可以让元素在状态改变时以动画的形式过渡到新状态，从而增强页面的交互性和视觉效果。
内置了多种效果，可以定制或者修改已有的效果

3.8 本地化

  <script>
    tailwind.config = {
      theme: {
        screens: {
          'sm': '600px',
          'md': '800px',
          'lg': '1024px',
          'xl': '1280px',
          '2xl': '1536px',
        },
        extend: {
          colors: {
            'purple': '#3f3cbb',
            'midnight': '#121063',
            'metal': '#565584',
          },
          spacing: {
            '6': '2rem',
          },
          borderRadius: {
            '4xl': '2rem',
          },
        }
      }
    }
  </script>

3.9 主题切换

Tailwind CSS 的 dark 模式是一种用于在网站或应用程序中切换明暗两种主题的功能。它可以让用户根据自己的喜好或环境光线的亮度来选择合适的主题，从而提高用户体验和可用性。
需要注意的是，为了实现 dark 模式，需要在 HTML 的 body 元素上添加 class=“dark” 属性。

四、开发环境设置

4.1 基本步骤

Installation - Tailwind CSS

使用Tailwind CLI tool工具开发文章来源地址https://www.toymoban.com/news/detail-648775.html

4.2 修改配置

{
  "name": "tailwind-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "tailwindcss -i ./src/input.css -o ./css/style.css --watch",
    "build": "tailwindcss -i ./src/input.css -o ./css/style.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.3.3"
  }
}

watch一直监控input.css变化，重构生成到style.css
build开发完成最后打包

4.3 样式定制化

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

@layer base{
  h1 {
    font-size: 3rem;
  }

  h2 {
    @apply text-2xl text-sky-500 font-bold mt-10;
  }

}

@layer components{
  .btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded m-10;
  }
}


.text-area{
  @apply bg-gray-200 border-2 border-gray-400 rounded-lg p-4;
  height: theme('spacing.128');
}

到了这里，关于Tailwind CSS入门教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Tailwind CSS入门教程

一、前言

二、基础教程上

2.1 颜色

2.2 边距

2.2.1 container

2.2.2 margin

2.2.3 padding

2.2.4 space

2.3 排版

2.4 尺寸

2.5 定位

2.6 阴影

2.7 边框

2.8 滤镜（filter）

三、基础教程下

3.1 伪类元素

3.2 媒体查询

3.3 Columns

3.4 flex布局

3.5 grid布局

3.6 动画

3.7 关键帧

3.8 本地化

3.9 主题切换

四、开发环境设置

4.1 基本步骤

4.2 修改配置

4.3 样式定制化

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

Tailwind CSS入门教程

一、前言

二、基础教程 上

2.1 颜色

2.2 边距

2.2.1 container

2.2.2 margin

2.2.3 padding

2.2.4 space

2.3 排版

2.4 尺寸

2.5 定位

2.6 阴影

2.7 边框

2.8 滤镜（filter）

三、基础教程 下

3.1 伪类元素

3.2 媒体查询

3.3 Columns

3.4 flex布局

3.5 grid布局

3.6 动画

3.7 关键帧

3.8 本地化

3.9 主题切换

四、开发环境设置

4.1 基本步骤

4.2 修改配置

4.3 样式定制化

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

二、基础教程上

三、基础教程下