Skip to main content

Tailwind Css

Tailwind CSS是一个功能强大的CSS框架, 它提供了一组原子级的CSS类，用于快速构建定制化的界面。

安装​

安装 Tailwind CSS 依赖，并运行 init 命令，自动生成 tailwind.config.js、 postcss.config.js 文件，其中postcss是一款css插件，通过使用插件来对CSS语法进行转换，例如添加浏览器前缀、压缩代码、转换未来的CSS语法等，后续会介绍，这里不做详细介绍。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置​

为了区分 Tailwind CSS 生成的类，我们可以在 tailwind.config.js 中添加前缀，例如 tw-。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    prefix: 'tw-',
    content: [
        './src/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
        extend: {},
    },
    plugins: []
}

导入样式​

src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

使用​

全局导入样式，在根组件中引入即可。

app/layout.jsx
import './globals.css'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
app/page.jsx
export default function Page() {
  return <h1 className="tw-text-3xl tw-font-bold tw-underline">Hello, Next.js!</h1>
}