Чтобы создать проект Redux Toolkit с помощью Tailwind CSS, вы можете выполнить следующие действия:

Шаг 1. Настройте проект React
Сначала создайте новый проект React с помощью Create React App. Откройте терминал и выполните следующую команду:

npx create-react-app my-app

Шаг 2. Установите Redux Toolkit и Tailwind CSS
Перейдите в папку проекта:

cd my-app

Установить пакеты Redux Toolkit и Tailwind CSS:

npm install @reduxjs/toolkit tailwindcss

Шаг 3. Настройте CSS Tailwind
Создайте новый файл с именем tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Создайте новый файл с именем src/index.cssи добавьте следующую строку для импорта CSS Tailwind:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Откройте файл src/index.jsи добавьте вверху следующую строку, чтобы импортировать файл CSS:

import './index.css';

Шаг 4. Создайте фрагменты Redux
Создайте новую папку с именем src/features. В папке featuresсоздайте файл с именем counterSlice.jsи добавьте следующий код:

import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Шаг 5. Настройте хранилище Redux
Откройте файл src/app/store.jsи замените его содержимое следующим кодом:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counterSlice';
export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Шаг 6. Измените компонент приложения
Откройте файл src/App.jsи замените его содержимое следующим кодом:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './features/counterSlice';
function App() {
  const counter = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}
export default App;

Шаг 7. Запустите сервер разработки
Выполните следующую команду в терминале, чтобы запустить сервер разработки:

npm start

Теперь у вас есть проект Redux Toolkit, настроенный с помощью Tailwind CSS! Вы можете использовать counterSliceдля управления состоянием счетчика и компонент Appв качестве отправной точки для вашего приложения.