在react中使用tailwind的問(wèn)題

更新時(shí)間：2022年10月09日 10:44:26 作者：非典小馬

這篇文章主要介紹了在react中使用tailwind的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react使用tailwind

現(xiàn)創(chuàng)建react項(xiàng)目

npx create-react-app name

進(jìn)入創(chuàng)建的項(xiàng)目文件夾，安裝tailwind,postcss,autoprefixer

因?yàn)閞eact自帶安裝了上一版本的postcss,所以這里要特別指定安裝對(duì)應(yīng)的舊版本。

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

又由于react本身不讓我們覆寫(xiě)它的postcss設(shè)定，所以要另外安裝craco這個(gè)工具

npm i @craco/craco

下載完后，打開(kāi)package.json文件，修改scripts中start,build,test的react-scripts為craco

然后生成一個(gè)和package.json同級(jí)的craco.config.js,編寫(xiě)如下

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

這里的設(shè)定代表原先的postcss設(shè)定文件

然后

npx tailwindcss init`

初始化tailwind的設(shè)定文件tailwind.config.js,設(shè)定purge的數(shù)組為src的目錄以及public文件夾下的index.html

    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html'

然后編輯src目錄下的index.css，清空里面的內(nèi)容，然后加載tailwind三大部件。

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

到此為止，已經(jīng)可以基本使用tailwind樣式了，在App組件中嘗試一下

import pic from './malibu.jpg'
function App() {
  return (
    <div className="antialiased text-gray-900 bg-gray-200 min-h-screen p-8 flex items-center flex-col justify-center min-w-screen">
      <div className="p-4 bg-indigo-300 rounded-3xl ">
        <h1 className=" text-xl font-semibold text-gray-500">Tailwind CSS</h1>
        <div className="w-24 mt-3">
          <img className="rounded-lg shadow-md" src={pic} alt="pic" />
        </div>
        <div className="">
          <span className="float-left mt-2 p-2 bg-green-300 text-sm font-black rounded-full shadow-sm">Nice view!</span>
          <div></div>
        <span className=" mr-100% float-right mt-2 p-2 bg-white text-sm font-black rounded-full shadow-sm">Go now?</span>
        </div>
       
      </div>
    </div>
  );
}

export default App;

效果圖

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談python的函數(shù)知識(shí)
這篇文章主要為大家介紹了python的函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
React中useState原理的代碼簡(jiǎn)單實(shí)現(xiàn)
要實(shí)現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過(guò)一段代碼簡(jiǎn)單闡述useState鉤子函數(shù)的實(shí)現(xiàn)思路,希望對(duì)大家有所幫助
2023-12-12
react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼
本文主要介紹了react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
React 條件渲染最佳實(shí)踐小結(jié)(7種)
這篇文章主要介紹了React 條件渲染最佳實(shí)踐小結(jié)(7種)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
react18中react-redux狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了react18中react-redux狀態(tài)管理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
react跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決
這篇文章主要介紹了react跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
React Native AsyncStorage本地存儲(chǔ)工具類(lèi)
這篇文章主要為大家分享了React Native AsyncStorage本地存儲(chǔ)工具類(lèi)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
react之組件通信詳解
本篇文章主要介紹了React組件通信詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2021-10-10
React中如何實(shí)現(xiàn)受控組件與非受控組件
在 React 開(kāi)發(fā)里,組件可分為受控組件和非受控組件,這篇文章將為大家介紹一下它們的實(shí)現(xiàn)原理,方法,區(qū)別,作用和應(yīng)用場(chǎng)景是什么,希望對(duì)大家有所幫助
2025-03-03
React?Hooks中?useRef和useImperativeHandle的使用方式
這篇文章主要介紹了React?Hooks中?useRef和useImperativeHandle的使用方式,文中說(shuō)明了useRef和useCallback一起使用,?可以解決閉包陷阱的問(wèn)題,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10