Шаблон ReactJs, TailwindUI и TailwindCSS

Руководство по созданию собственного проекта UI / CSS на React и Tailwind.

ИНДЕКС:

Следовать вместе
Быстрый старт (прокрутите вниз)

Прежде чем мы начнем, я хотел бы поблагодарить вас за то, что вы нашли время прочитать мое руководство + статью. Мне очень нравится предоставлять сообществу простые и полезные примеры. Если вам в конечном итоге понравится моя статья, пожалуйста, похлопайте по ней. Или, если вы хотите, чтобы я что-то добавил, прокомментируйте. Я не смогу поправиться без вашего отзыва. Еще раз спасибо!

Follow Along

Далее мы собираемся создать базовый шаблон, чтобы начать создание вашего приложения для реагирования с использованием React, Tailwind UI и Tailwind CSS.

Tailwind UI - это последняя библиотека Tailwind CSS, которую они создают для уже созданных компонентов. т.е. (боковая навигация, карты, таблицы, полнофункциональные панели мониторинга и т. д.)

Шаг 1. Создайте приложение React

Создадим приложение React! Если вы знакомы с реакцией, это должно быть вам знакомо.

Откройте свой терминал и запустите следующее:

>> npx create-react-app tailwindcss-react-template

Это установит реакцию в вашем текущем рабочем каталоге.

Шаг 2. Установите зависимости

Далее установим наши зависимости.

npm i tailwindcss@^1.5.1 @tailwindcss/ui postcss-cli autoprefixer

Шаг 3. Добавьте и измените следующие файлы и папки

Добавьте следующие файлы, если они не были созданы автоматически

touch tailwind.config.js postcss.config.js

Внутри этих файлов давайте добавим следующие

//tailwind.config.js
// This file imports all of the required plugins, you can also customize colors, sizing, themes, etc here (I recommend looking into it)
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
require("@tailwindcss/ui"),
],
};
//postcss.config.js
const purgecss = require("@fullhuman/postcss-purgecss")({
// Specify the paths to all of the template files in your project
content: [
"./src/**/*.html",
"./src/**/*.vue",
"./src/**/*.jsx",
// etc.
],
// Include any special characters you're using in this regular expression
});
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
...(process.env.NODE_ENV == "production" ? [purgecss] : []),
],
};

Давайте создадим каталог ресурсов в нашем src /

mkdir src/assets

Внутри нашей папки с ресурсами давайте создадим два файла main.css и tailwind.css, нам нужно будет только изменить tailwind.css. В процессе сборки будет автоматически заполнен main.css

//tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind css/ui;

Шаг 4. Обновите скрипты package.json

И последнее, но не менее важное: нам нужно отредактировать наши скрипты package.json. Добавьте в скрипты следующее

"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/assets/tailwind.css -o src/assets/main.css",
"watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
},

Бум. Теперь у вас должна быть возможность запустить npm start, и будет создан попутный ветер.