❮
❯
TOC
CHAT
分类 标记语言与样式　5761字　20分钟📤 🖨 📝

Tailwind CSS基本教程

作者

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

官网：tailwindcss.com

中文文档：www.tailwindcss.cn/docs/installation

1 开发环境配置

1.1 安装与设置

步骤如下：

  1. 安装Tailwind Css依赖：npm install -D tailwindcss
  2. 创建配置文件tailwind.config.js，如下所示：npm tailwindcss init
tailwind-starter
├── CSS
│   └── style.css
├── node_modules
│   ├── ...
├── src
│   ├── input.css
│   └── index.html
├── package.json
├── pnpm-lock.yaml
├── tailwind.config.js
├──.gitignore
└── README.md
  1. 修改配置文件tailwind.config.js的配置
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js,vue}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

1.2 样式定制化

@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');
}

2 疑难解析

2.1 PostCSS插件问题

使用Next.js构建项目时常选择自动安装Tailwind CSS，但由于PostCSS插件自身问题，初次使用时易发生如下错误：

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

解决方法：

  1. 卸载重新安装各插件
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@latest autoprefixer@latest
  1. 确保postcss.config.js为如下配置
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}
  1. 在globals.css最上方新增@import "tailwindcss";，如下所示
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

3 颜色

可选颜色单词：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>

4 边距

4.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;

4.2 margin

m-1为默认值，即margin: 0.25rem（=4px；通常1rem = 16px）

<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>

4.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>

4.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>

5 排版

<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：详见fonts.google.com，可以使用内置的字体或者自定义的字体
  • Font Size：文字的大小
  • Font Weight：文字的粗细
  • Letter Spacing：文字的间距
  • Text Alignment：文字左、居中、右
  • Text Decoration：文本的装饰效果，例如下划线、删除线、上划线等
  • Decoration Style：样式
  • Decoration Offset：文本装饰线与文本本身之间的距离
  • Text Transform：文本的大小写转换方式

TBD

发表评论