WebHU - Programozási kérdések és válaszok

React craco tailwind postcss integráció

A projektem craco-t használ az indításhoz/építéshez, integrálni szeretném a tailwind postcss-t. Követem ezt az oktatóanyagot https://dev.to/ryandunn/how-to-use-tailwind-with-create-react-app-and-postcss-with-no-hassle-2i09 De ennek eredményeként , ebben a hibában szenvedek: hiba

A konfigurációs fájljaim az alábbiak szerint néznek ki:

craco.config.js (ez úgy néz ki, hogy hol van a probléma, mivel úgy érzem, hogy a stílus felülírhatja az alatta lévő craco stílust, ezért a fenti hibát okozta, de nem 100%-ig biztos, hogyan lehet megoldani ezt a rejtvényt.)

module.exports = {
  style: {
    postcss: {
      plugins: [
        require("tailwindcss")("./tailwind.config.js"),
        require("postcss-nested"),
        require("autoprefixer"),
      ],
    },
  },

craco.config.js teljes verzió

postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

tailwind.config.js

module.exports = {
    purge: ["./src/**/*.html", "./src/**/*.jsx", "./src/**/*.js", "./src/**/*.tx", "./src/**/*.tsx"],
    theme: {
        extend: {
          screens: {
            xs: { max: "400px" },
          },
        },
      },
  };

Az alkalmazást innen futtatom

docker-compose up

Van valami javaslata a hiba és a konfiguráció javítására? Kérem adjon tanácsot néhány kódpéldával Előre is köszönöm


  • Próbálkozzon a postcss használatával a postcss-nested beépülő modul helyett. Ugyanezt a cikket követtem, hogy a Tailwind együttműködjön a CRA-val. Távolítsa el a require("postcss-nested"), sort és a yarn add postcss 24.11.2020

Válaszok:


1

El kell távolítania a tailwindcss postcss-t és az autoprefixert. Ezután telepítse újra ezeket a konkrét verziókat

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

nekem is volt ilyen gondom! Ezen a linken több információ található. https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

04.12.2020
Új anyagok

A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..