❤React体系13-tailwindcss的安装和使用
yarn add -D tailwindcss
npx tailwindcss init
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
方式一 （Tailwind CLI方式 ）
1、安装Tailwind CSS、PostCSS、Autoprefixer
PostCSS 和 Autoprefixer对Tailwind CSS 进行编译和自动添加浏览器前缀
下载安装
yarn add -D tailwindcss postcss autoprefixer
2、使用Tailwind CSS CLI创建配置文件
在项目根目录下生成一个 tailwind.config.js 文件
npx tailwindcss init -p
3、配置
tailwind.config.js
在项目根目录下创建 tailwind.config.js 文件
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
其他配置
- React：`"./src/**/*.{js,jsx,ts,tsx}"`
- Vue: `"./src/**/*.{vue,js,ts,jsx,tsx}”`
- Svelte: `"./src/**/*.{svelte,js,ts,jsx,tsx}"`
PostCSS 配置 postcss.config.js
在项目根目录下创建 postcss.config.js 文件
module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] }
4、在index.css（你的全局css文件）中添加tailwindcss配置
@tailwind base;
@tailwind components;
@tailwind utilities;
5、vscode之中发现警告消除
这个时候我们把鼠标放上去在编辑器之中给了我们一个提示
此时发现有警告，只需要在设置中搜索unkown，然后将如下设置为ignore即可。如果你是用的是less或者scss，下滑可以找到选项
6、下载插件Tailwind CSS IntelliSense提示我们写Tailwind CSS
安装成功以后我们鼠标放上去可以看到提示的css
7、简单使用Tailwind CSS
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
<img
className="mx-auto h-10 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
alt="Your Company"
/>
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
Sign in to your account
</h2>
</div>
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form className="space-y-6" action="#" method="POST">
<div>
<label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
Email address
</label>
<div className="mt-2">
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<div className="flex items-center justify-between">
<label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
Password
</label>
<div className="text-sm">
<a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
Forgot password?
</a>
</div>
</div>
<div className="mt-2">
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<button
type="submit"
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Sign in
</button>
</div>
</form>
<p className="mt-10 text-center text-sm text-gray-500">
Not a member?{' '}
<a href="#" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
Start a 14 day free trial
</a>
</p>
</div>
</div>
最后看看我们的使用效果
8、优化使用tailwindcss-开启 Tailwind CLI 构建流程
在我们的根目录下面下一个input.css
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
9、在项目 HTML 代码中直接引用构建过的 Tailwind
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
方式二 （使用PostCSS 方式 强烈推荐）
安装
yarn add postcss autoprefixer postcss-preset-env --dev
创建 PostCSS 配置文件
在项目根目录下创建一个 postcss.config.js 文件，并添加以下内容：
module.exports = {
plugins: [
'postcss-preset-env',
'autoprefixer',
// 其他的 PostCSS 插件可以在这里添加
],
};
配置 craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('postcss-preset-env'),
require('autoprefixer'),
// 其他的 PostCSS 插件可以在这里添加
],
},
},
};
App.css之中配置
（不行再尝试这个）
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
（这个推荐）
@tailwind base;
@tailwind components;
@tailwind utilities;
完成！
遇到的问题
在create react-app 创建的TS版本之中，无论如何使用，tailwindcss都无法生效
出现的背景：我使用官方推荐的CRA版本之前搭建的react js 项目之中使用没问题，然后搭建了TS版本的，采用craco进行没有eject方式的配置,直接迁移过来没有生效！
解决方式一 ：
//卸载安装包
yarn remove tailwindcss postcss autoprefixer
//重新安装
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
解决效果：
没效果，解决失败！ 看到文章的老哥可以留言提个建议，追本溯源，看看究竟是因为什么原因！
再次重新配置我的craco.config.js 文件，文件内容和里面的东西如下图所示。
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
// 其他的 PostCSS 插件可以在这里添加
],
},
},
webpack: {
configure: (webpackConfig, { env, paths }) => {
// 找到处理 CSS 的 Rule
const cssRule = webpackConfig.module.rules.find(
(rule) => rule.oneOf && rule.oneOf.find((r) => r.test && r.test.toString().includes(".css"))
);
// 如果找不到 CSS Rule，返回原始配置
if (!cssRule) {
console.log("CSS Rule not found!");
return webpackConfig;
}
// 向处理 CSS 的 Rule 中的匹配项添加 PostCSS Loader
cssRule.oneOf.forEach((r) => {
if (r.test && r.test.toString().includes(".css")) {
r.use.push({
loader: require.resolve("postcss-loader"),
options: {
postcssOptions: {
ident: "postcss",
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
// 其他的 PostCSS 插件可以在这里添加
],
},
},
});
}
});
return webpackConfig;
},
},
};
成功，这就继续上手tailwindcss！
