Как включить JIT(Just in time mode) с приложением create response?

Question

Я пробовал самостоятельно настроить JIT в приложении create-react-app, но он, похоже, не работает, так как стили не обновляются. Я использую Craco для создания приложения с попутным ветром css, а также добавил TAILWIND mode=WATCH, поскольку они предложили заставить его работать с большинством сборок. Вот мои конфиги:

tailwind.config.js

      module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
    extend: {
        colors: {
            primary: "#ffa500",
            secondary: {
                100: "#E2E2D5",
                200: "#888883",
            },
        },
    },
},
variants: {
    extend: {
        opacity: ["disabled"],
    },
},
plugins: [],};

package.json скрипты

          "scripts": {
    "start": " craco start",
    "build": "TAILWIND_MODE=watch craco build",
    "test": "craco test",
    "server": "nodemon ./server/server.js",
    "eject": "react-scripts eject"
},

package.json devDependencies

      "devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
},

Я буду рад, если смогу исправить это.

Answer 1

Если вы работаете в Windows (как я подозреваю, вы можете быть из своего комментария к ответу @Ako), то ваша установка верна, но вам просто нужно установить cross-env, а затем настроить свой стартовый скрипт следующим образом:

      "start": "cross-env TAILWIND_MODE=watch craco start"

Answer 2

ты должен использовать TAILWIND_MODE=watchв вашем стартовом скрипте не строить , и после того, как вы разработали то, что хотите, создайте его просто с craco buildсценарий. поэтому ваши скрипты package.json должны выглядеть так:

        "scripts": {
    "start": "TAILWIND_MODE=watch craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
  },

также в опоре очистки внутри файла tailwind.config.css вы должны добавить './src/components/*.{js,jsx}' поэтому чистка должна выглядеть так:

      purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],

и после того, как вы создали свое приложение, вы должны обслужить файл index.html внутри папки сборки.

клонируйте это репо и после создания проекта используйте npm run servebuildи посмотрите, работает ли это.https://github.com/ako-v/cra-tailwindcss-jit-craco

Answer 3

Таким образом, вам нужно следить за своими файлами JSX, JS, HTML с помощью параметра ``--watch '', предоставленного в CLI tailwindcss.
Итак, что вы можете сделать, это открыть новый терминал в корне проекта реакции и следовать команда ниже

      npx tailwindcss -o ./src/App.css --watch

• [-i] вы также можете предоставить входной файл, используя эту опцию.
  
• [-o] изменить вывод в соответствии со структурой вашей папки.

Это обеспечит перестройку файла CSS. Следующим шагом будет открытие другого терминала и выполнение и ваш сервер разработки готов с JIT-компилятором.

(примечание стороны)
Кроме того, я использую попутный ветер с моей конфигурацией по умолчанию package.json, и он также работает плавно без Craco (как JIT / по умолчанию), так и в продакшене.