likes
comments
collection
share

vite+React+Tailwindcss环境安装

作者站长头像
站长
· 阅读数 33

TailwindCSS是什么?

Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flexpt-4,  text-center 和 rotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。 使用 TailwindCss 你不用花精力来定义类名,你可以使用内置具有良好语义化的类名,实现样式效果。你也可以一定程度定义符合你自己规则的类名,例如加上统一的前缀

Tailwindcss中文文档中提供了react框架安装的教程,详情请看下方 在 Create React App 中安装 Tailwind CSS - Tailwind CSS 中文文档 但我根据官网教程并不能成功安装,在实验多次后,终于找到一个成功安装的方法了!!!

安装步骤

  1. 初始化一个react项目 ->
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  1. 在根目录下创建postcss.config.js文件
// postcss.config.js
export const plugins = {
    tailwindcss: {},
    autoprefixer: {},
};
  1. 在项目中初始化 tailwind
npx tailwindcss init

会生成tailwind.config.js文件或是tailwind.config.cjs文件

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
     colors:{
        //自定义颜色
        "welcome-btn":"#0052FF"
      }
    },
  },
  plugins: [],
}

  1. 在根目录下创建一个styles.css文件
@tailwind base;
@tailwind components;
@tailwind utilities;

然后修改package.json 文件中

"scripts": {
    "tailwind": "tailwindcss build src/styles.css -o public/styles.css"
  },

在项目目录中创建public文件,执行以下命令

npm run tailwind

即完成建构,public文件夹中多了一个styles.css文件,在main.jsx中引入

vite+React+Tailwindcss环境安装

  1. 测试一下 App.jsx
import { useState } from 'react'

function App() {

  return (
    <button className="bg-red hover:bg-blue-700 text-3xl text-red-500">
    Hover me
</button>
  )
}

export default App

结果如下:

vite+React+Tailwindcss环境安装 ps:如果还不成功的话,可以再多装几次 tailwindcss,亲测有效!

npm i tailwindcss
转载自:https://juejin.cn/post/7166987641446268958
评论
请登录