react18,使用tailwindcss

前言

解放双手再也不用去写多余的css了。

安装

• 第一步

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

• 第二步

npm install @craco/craco@latest

按照官网上的取不到最新版会报错

• 第三步：安装完毕后，更新 package.json 文件中的 scripts，将 eject 以外的所有脚本都用 craco 代替 react-scripts。

 {
    // ...
    "scripts": {
-     "start": "react-scripts start",
-     "build": "react-scripts build",
-     "test": "react-scripts test",
+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

• 第四步：在项目根部创建一个 craco.config.js，并添加 tailwindcss 和 autoprefixer 作为 PostCSS 插件。

module.exports = {
  style: {
    postcssOptions: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
};

• 第五步:生成 tailwind.config.js 文件

npx tailwindcss-cli@latest init

生成tailwind.config.js文件

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

最后一步:css中引入Tailwind

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

note:确认在index.js中引入了index.css，此时便可使用Tailwind了。

使用

响应式

断点前缀	最小宽度	CSS
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) { ... }

• 要添加一个仅在特定断点生效的功能类，只需要在该功能类前加上断点名称，后面跟 : 字符。

<img class="w-16 md:w-32 lg:w-48" src="...">