React and Tailwind CSS установка

Всем привет, я филип И я разработчик JavaScript. Это мой первый пост в блоге. Надеюсь, тебе понравится И я хотел бы услышать, что вы думаете об этом посту и как я могу улучшить свое письмо в будущем.

Что нам нужно

Терминальная/командная строка (например, PowerShell на Windows, ZSH на Linux)
IDE (например, код против кода)
Nodejs – 8.11.3+
NPM – 6.12.1+

1. Начиная

Сначала мы установим npx упаковка во всем мире. Этот пакет позволяет нам выполнять пакеты из NPM без их установки. Когда мы запускаем эту команду, он загружает пакет, выполняет его и удаляет. Мы установим его со следующей командой:

npm i npx -g

Теперь мы создадим приложение стартового React, используя Create-React-App Пакет со следующей командой:

npx create-react-app my-react-app

Это создаст приложение React в папке с именем My-React-App (Имя приведено в команде выше). Теперь мы переодеваемся в каталог и установим некоторые пакеты, которые нам нужны. Пока нам понадобится React-Router-Dom (Для навигации в приложении), Tailwindcss (для попугрета), AutoPrefixer (Для префикса CSS для разных браузеров) и postcss-cli (Для просмотра и перезагрузки обновлений CSS). Мы можем сделать это со следующими командами:

cd my-react-app
yarn add react-router-dom tailwindcss autoprefixer postcss-cli

Если вы хотите увидеть начальное приложение, созданное до сих пор, вы можете запустить следующую команду:

yarn start

Приложение будет запущено в Localhost: 3000 и отобразит стандартный новый экран приложения React.

2. Настройка Tailwind & PostCSS

Теперь мы настроим конфигурации для Tailwind и PostCSS. Сначала мы инициализируем Taillide в наш проект. Мы можем сделать это, выполнив следующую команду:

npx tailwindcss init

Это создаст файл с именем tailwind.config.js с пустой конфигурацией для ветра. Мы можем настроить это так, как хотим, но сейчас мы оставим это как есть. Далее мы настроим конфигурацию PostCSS. Для этого мы создадим файл конфигурации вручную. Вы можете сделать это со следующей командой:

touch postcss.config.js

Это создаст файл с именем postcss.config.js Анкет Теперь мы можем добавить конфигурацию для PostCSS в этом файле. Вы можете скопировать и вставить следующую конфигурацию в файл:

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

Теперь мы можем создать файл глобальных стилей, который будет импортировать попутный ветер в нашем приложении. Я рекомендую в SRC Папка, которую мы создаем папку с названием Стили Это будет держать все глобальные стили, которые нам нужны. В этой папке мы можем создать файл с именем Tailwind.css или Global.css (Помимо ветра в этом файле, мы можем добавить несколько пользовательских глобальных переопределений). Чтобы использовать Tailwind все, что нам нужно сделать, это поместить следующее в файловом файле CSS, который мы создали:

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

/* All other CSS will go here */

3. Соединение Tailwind, Postcss и React

Теперь нам нужно изменить начальные сценарии для проекта, которые определены в Package.json файл. Когда мы открываем файл, если следует выглядеть так:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "autoprefixer": "^9.7.5",
    "postcss-cli": "^7.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "tailwindcss": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Мы изменим часть файла сценария со следующими командами:

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/global.css -o src/styles/main.css",
    "watch:css": "postcss src/styles/global.css -o src/styles/main.css"
}

Теперь нам просто нужно импортировать файл CSS, который будет создан, когда приложение будет встроено в index.js (Корень приложения), и мы можем начать использовать Taillide в нашем приложении. Сделать это просто заменить Импорт './index.css'; с Импорт './styles/main.css'; Анкет

И это все. Теперь мы можем начать делать красивые приложения React с Tailwind. Для получения дополнительной информации о том, как использовать Tailwind, я рекомендую Документация по ветру , это очень ясно и имеет много примеров.

Код для этого урока можно найти Здесь Анкет

Счастливого кодирования.

Оригинал: “https://dev.to/0x96f/react-and-tailwind-css-setup-51h0”

Что нам нужно

1. Начиная

2. Настройка Tailwind & PostCSS

3. Соединение Tailwind, Postcss и React

Читайте ещё по теме: