一路繁花似锦绣前程
失败的越多，成功才越有价值

导航

 
tailwindcss基本使用

目录

一、tailwindcss基本使用

1、设置tailwind和postcss
  • 命令
* npm init -y
* npm i tailwindcss postcss-cli autoprefixer
* npx tailwind init
  • 编辑tailwind.config.js
module.exports = {
  content: ["./public/**/*.{html,js}"],
}
  • 新建postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ]
}
  • 新建css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • 编辑package.json
{
  "scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  },
}
  • 命令
* npm run build
  • 新建public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tailwind</title>
  <link rel="stylesheet" href="./build/tailwind.css"/>
</head>
<body>
<h1 class="text-4xl font-bold text-center text-blue-500">hello world</h1>
</body>
</html>
2、实用性
* 在不编写 CSS 的情况下使用实用程序类构建自定义设计
    - 你不是在浪费精力发明类名
    - 你的 CSS 停止增长
    - 做出改变感觉更安全
* 为什么不直接使用内联样式？
    - 有约束的设计
    - 响应式设计
    - 悬停、焦点和其他状态
* 可维护性问题
    - 事实证明，维护实用程序优先的 CSS 项目比维护大型 CSS 代码库要容易得多，
      原因很简单，因为 HTML 比 CSS 更容易维护。
3、响应式
  • 使用
<!-- 640px <= screen -->
<div class="sm:bg-red-500 h-4"></div>
<!-- 640px <= screen <= 768px -->
<div class="sm:max-md:bg-green-500 h-4"></div>
<!-- 640px <= screen -->
<div class="tablet:bg-blue-500 h-4"></div>
  • 配置tailwind.config.js
module.exports = {
  theme: {
    // 默认，可修改会覆盖
    screens: {
      '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) { ... }
    },
    extend: {
      // 添加
      screens: {
        'tablet': '640px',
        // => @media (min-width: 640px) { ... }
        'laptop': '1024px',
        // => @media (min-width: 1024px) { ... }
        'desktop': '1280px'
        // => @media (min-width: 1280px) { ... }
      }
    }
  }
}
4、伪类和伪元素
  • 使用
<!-- 1、基本使用 -->
<button class="text-white bg-green-500 hover:bg-red-500">按钮</button>
<!-- 2、奇偶 -->
<ul>
  <li class="odd:text-red-500 even:text-green-500">111</li>
  <li class="odd:text-red-500 even:text-green-500">222</li>
  <li class="odd:text-red-500 even:text-green-500">333</li>
  <li class="odd:text-red-500 even:text-green-500">444</li>
</ul>
<!-- 3、表单 -->
<label>
  <input type="email" class="border border-green-500 focus:outline-none invalid:border-red-500"/>
</label>
<!-- 4、祖伪类 -->
<div class="w-48 border border-red-500 group">
  <div class="w-24 h-8 border border-green-500 group-hover:bg-green-500"></div>
</div>
<!-- 5、兄弟 -->
<!-- 单个 -->
<label>
  <input type="text" class="peer focus:outline-none border"/>
  <span class="peer-focus:text-green-500">聚焦</span>
</label>
<!-- 多个 -->
<div>
  <input id="foot" class="peer/foot" type="radio" name="interest" checked/>
  <label for="foot" class="peer-checked/foot:text-green-500">足球</label>
  <input id="hand" class="peer/hand" type="radio" name="interest"/>
  <label for="hand" class="peer-checked/hand:text-green-500">手球</label>
</div>
<!-- 6、伪元素 -->
<div class="before:content-['你好'] after:block after:h-8 after:bg-green-500"></div>
<!-- 7、自定义修饰符 -->
<!-- 空格需使用_代替 -->
<div class="w-48 border border-red-500 [&:hover_div]:bg-green-500">
  <div class="w-24 h-8 border border-green-500"></div>
</div>
<!-- hover-descendants修饰符需插件配置 -->
<div class="w-48 border border-red-500 hover-descendants:bg-green-500">
  <div class="w-24 h-8 border border-green-500"></div>
</div>
  • 配置tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({addVariant}) {
      addVariant('hover-descendants', '&:hover div')
    })
  ],
}
5、重用样式
  • 配置package.json
{
  "scripts": {
    "watch": "postcss css/tailwind.css -o public/build/tailwind.css --watch"
  }
}
  • css/tailwind.css
@layer components {
  .btn-primary {
    @apply py-1 px-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }

  .btn-success {
    @apply py-1 px-2 bg-green-500 text-white rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75;
  }

  .btn-danger {
    @apply py-1 px-2 bg-red-500 text-white rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75;
  }
}
  • 使用
<button class="btn-primary">主要按钮</button>
<button class="btn-success">成功按钮</button>
<button class="btn-danger">危险按钮</button>
6、自定义主题
  • 命令
* 默认的主题配置：npx tailwind init tailwind-full.config.js --full
  • 配置tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({addBase, addComponents, addUtilities, theme}) {
      addBase({
        '#app': {
          overflow: 'auto'
        }
      })
      addComponents({
        '.btn-danger': {
          color: 'white',
          'font-size': theme('fontSize.sm[0]'),
          'line-height': theme('fontSize.sm[1].lineHeight'),
          background: theme('colors.red.500'),
          padding: `${theme('space.1')} ${theme('space.2')}`,
          'border-radius': theme('borderRadius.DEFAULT')
        },
        '.btn-danger:hover': {
          background: theme('colors.red.700')
        }
      })
      addUtilities({
        '.text-overflow-ellipsis': {
          'white-space': 'nowrap',
          overflow: 'hidden',
          'text-overflow': 'ellipsis'
        }
      })
    })
  ],
}
  • css/tailwind.css
@tailwind base;
@tailwind components;

/*
1、需在【utilities】之前添加，会在样式表中一直存在
2、【base】、【components】、【utilities】只有实际使用了才会在样式表中存在
3、vue文件的style标签中，【base】、【components】、【utilities】不可以使用，theme()可以使用
*/
.btn-primary {
  color: white;
  font-size: theme('fontSize.sm[0]');
  line-height: theme('fontSize.sm[1].lineHeight');
  background: theme('colors.blue.500');
  padding: theme('space.1') theme('space.2');
  border-radius: theme('borderRadius.DEFAULT');
}

.btn-primary:hover {
  background: theme('colors.blue.700');
}

@tailwind utilities;

@layer base {
  html, body, #app {
    height: 100%;
  }
}

@layer components {
  .btn-success {
    @apply px-2 py-1 text-white text-sm rounded bg-green-500 hover:bg-green-700
  }
}

@layer utilities {
  .clear-both-after {
    @apply after:block after:clear-both
  }
}
  • 使用
<div id="app">
  <style>
    :root {
      --ll-primary-color: #bada55;
      --ll-primary-fontsize: 32px;
    }
  </style>
  <!-- 1、使用任意值 -->
  <!-- 单独定义或使用css变量无需var()包装 -->
  <!-- theme()函数可返回tailwind-full.config.js中的值 -->
  <div class="h-[32px] bg-[--ll-primary-color] w-[theme(spacing.40)]"></div>
  <!-- _用来转换空格，\_则不会转换空格 -->
  <div class="[border:16px_solid_var(--ll-primary-color)] before:content-['hello\_world']"></div>
  <!-- 公共命名空间和css变量一起使用，需用css数据类型（默认color，可省略）修饰 -->
  <div class="text-[length:--ll-primary-fontsize]">你好</div>
  <div class="text-[color:--ll-primary-color]">你好</div>
  <!-- 2、使用@apply -->
  <div class="clear-both-after border">
    <!-- 自定义 -->
    <button class="btn-primary float-left">按钮</button>
    <!-- @layer -->
    <button class="btn-success float-left">按钮</button>
    <!-- 插件 -->
    <button class="btn-danger float-left">按钮</button>
  </div>
  <div class="text-overflow-ellipsis w-24">这是一段中文这是一段中文</div>
</div>
7、补充知识点
  • @config（自定义配置文件）
@config "./tailwind.site.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;
  • prefix（自定义前缀）
module.exports = {
  prefix: 'tw-',
}
posted on 2023-06-15 15:58  一路繁花似锦绣前程  阅读(1068)  评论(0)  编辑  收藏  举报
 
Powered by:
博客园
Copyright © 2024 一路繁花似锦绣前程
Powered by .NET 9.0 on Kubernetes