create-react-app + tailwindcss

最新推荐文章于 2024-04-25 23:54:55 发布

wzw60606

最新推荐文章于 2024-04-25 23:54:55 发布

阅读量357

点赞数

分类专栏： tailwindcss 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47551643/article/details/128841363

版权

tailwindcss 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

tailwindcss：直接通过类名实现css样式。可以避免以前那种绞尽脑汁给盒子取像样的类名，而拖累开发进度的情况，每次为了给盒子取有语义化的类名，是一件非常令人痛苦的事情。而tailwindcss可以很大程度帮助我们避免这种情况

中文文档：https://www.tailwindcss.cn
英文文档：https://tailwindcss.com/docs/guides/create-react-app

集成中遇到的问题：使用 create-react-app v5.0+ 创建的react项目，在按部就班的按照中文文档集成tailwindcss时，tailwindcss的class类名一直不起作用，也无报错日志，后面在英文文档中看到了v3版本的配置，而中文文档的配置是v2版本的。。所以老铁们还是要习惯看英文文档哇

创建react项目

npx create-react-app js-project
npx create-react-app ts-project --template typescript

"react-scripts": "5.0.1",

运行

npm install
npm run start

tailwindcss

npm install -D tailwindcss

package.json

"devDependencies": {
  "tailwindcss": "^3.2.4"
}

初始化tailwindcss.config.js配置文件

npx tailwindcss init

// tailwindcss.config.js
module.exports = {
  // content: [],
  // 配置tailwindcss生效的文件范围
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css引入

@tailwind base;
@tailwind components;
@tailwind utilities;

重新启动项目

npm run start

使用

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo w-24" alt="logo" />
        <p className='text-pink-600 flex'>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

export default App;