Рубрики
Без рубрики

React + Tailwind

Вступление Tailwind зарекомендовал себя как довольно удобная структура CSS. Подобно Бо … с меткой JavaScript, React, CSS.

Tailwind зарекомендовал себя как довольно удобная структура CSS. Подобно начальной загрузке, за исключением большей гибкости и настройки. Есть и другие варианты, когда речь заходит о выборе рамки в React, но попутный ветер просто имеет смысл мне. Итак, сегодня я хотел бы поделиться очень простым способом создать его в React!

Шаг 1: Зависимость

Первое, что вы хотите сделать (при условии, что у вас есть node.js), это npm установить tailwindcss Анкет Это сохранит его как зависимость от вашего проекта.

Шаг 2: Tailwind.css

Создать Tailwind.css Файл под вашим SRC/ файл. Далее включите это содержимое внутри:

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

Шаг 3: Сценарии

Затем нам нужно включить Tailwind для составления CSS вместе в новом файле, когда наше приложение запускается. Чтобы сделать это, нам нужно запустить некоторые сценарии предварительных счетов. Зайдите в свой Package.json и обновить сценарий с этим:

"scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Это в конечном итоге создаст новый tailwind.output.css Файл, когда мы запустим наше приложение.

Шаг 4: Добавить его доступным

Теперь нам просто нужно сделать tailwind.output.css доступен для всего нашего приложения. Отправляйтесь в index.js и поместите эту линию где угодно в верхней части файла:

import './tailwind.output.css';

И это так просто! Вы все готовы использовать Tail Wind в вашем приложении React. Просто зажги его npm start !

Как тот, кто не довольно Экспертный дизайнер, я считаю, что Tailwind работает хорошо даже в более продвинутых приложениях/библиотеках. Дизайн – это его собственный зверь, и его легко терять в создании пользовательского интерфейса в одиночку, прежде чем попасть в привязку вашего приложения. Лучше упростить дизайн и сделать все это Работа Прежде чем сделать это красиво Анкет

Я надеюсь, что вы, ребята, наслаждались этим учебником быстрого настройки! Счастливого вторника! 🎉

Оригинал: “https://dev.to/matthewpalmer9/react-tailwind-24ij”

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