Tailwind css with react

В этом руководстве мы расскажем, как настроить или добавить Tailwind CSS в приложение React JS. Мы также покажем Вам пример, как создать простой компонент с помощью фреймворка Tailwind CSS.

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

Tailwind CSS помогает не засорять HTML разметку, и любой может легко создавать более привлекательные макеты с помощью встроенных классов tailwind. Tailwind предлагает множество UI виджетов, которые увеличивают скорость разработки.

Это руководство по Tailwind CSS будет полезным примером CSS React Tailwind, для начинающих разработчиков React. Особенно тем, кто собирается увидеть божественное слияние React и Tailwind CSS.

Как добавить и использовать Tailwind CSS v3 в приложении React Js

Шаг 1: Создание нового приложения React
Шаг 2: Добавление модуля Tailwind CSS
Шаг 3: Создание файла конфигурации Tailwind
Шаг 4: Добавление директив Tailwind
Шаг 5: Компиляция CSS Tailwind
Шаг 6: Создание компонента с помощью Tailwind
Шаг 7: Запуск React-приложения

Создание нового приложения React

Откройте командную строку, введите команду используя create-react-app tool:

 npm install create-react-app --global

На этом этапе мы запустим команду и создадим новый проект.

 npx create-react-app react-demo

Войдите в папку своего приложения:

Добавление модуля Tailwind CSS

После того, как Вы вошли в корень своего проекта Вам необходимо ввести и выполнить данную команду, чтобы установить tailwindcss.

 npm install -D tailwindcss

Создание файла конфигурации Tailwind

На этом шаге мы создадим файл tailwind.config.js , поэтому выполните следующую команду, чтобы сгенерировать файл конфигурации попутного ветра.

После выполнения команды, у Вас сгенерируется автоматически конфиг файл со следующим кодом.

 module.exports = < darkMode: 'class', content: ['./src/**/*.'], theme: < extend: <>, >, plugins: [], >

Добавление директив Tailwind

Теперь Вам нужно перейти к файлу App.css, в этом файле мы разместим директивы @tailwind.

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

Компиляция CSS Tailwind

Кроме того, выполните следующую команду, чтобы запустить CLI Tailwind для сканирования файлов шаблонов React на наличие классов и сборки CSS.

 npx tailwindcss -i ./src/App.css -o ./src/styles/output.css --watch

Создание компонента с помощью Tailwind

Чтобы проверить, корректно ли работает Tailwind CSS, мы собираемся использовать компонент Tailwind Card в React js.

Откройте файл App.js и добавьте в него указанный код.

 import './App.css' import React from 'react' function App() < return ( >      The Coldest Sunset
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
 
  #photography #travel #winter 
 
 
 ) > export default App

Запуск React-приложения

На последнем шаге мы запустим наше приложение, используя команду:

Откройте URL для просмотра приложения в браузере:

В этом подробном руководстве мы узнали, как добавить Tailwind CSS в приложении React JS. Мы надеемся, что это пошаговое руководство поможет Вам создавать более качественные приложения React за значительно меньшее время.

Источник

Install Tailwind CSS with Create React App

Start by creating a new Create React App project if you don’t have one set up already. The most common approach is to use Create React App:

npx create-react-app my-project cd my-project

Setting up Tailwind CSS

Install Tailwind via npm

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create React App doesn’t support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we’ve shown above.

Install and configure CRACO

Since Create React App doesn’t let you override the PostCSS configuration natively, we also need to install CRACO to be able to configure Tailwind:

Once it’s installed, update your scripts in your package.json file to use craco instead of react-scripts for all scripts except eject :

  // . "scripts":  - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test",  "eject": "react-scripts eject" >, >

Next, create a craco.config.js at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins:

// craco.config.js module.exports =  style:  postcss:  plugins: [ require('tailwindcss'), require('autoprefixer'), ], >, >, >

If you’re planning to use any other PostCSS plugins, you should read our documentation on using PostCSS as your preprocessor for more details about the best way to order them alongside Tailwind.

Create your configuration file

npx tailwindcss-cli@latest init

// tailwind.config.js module.exports =  purge: [], darkMode: false, // or 'media' or 'class' theme:  extend: >, >, variants:  extend: >, >, plugins: [], >

Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds:

 // tailwind.config.js module.exports =  - purge: [], + purge: ['./src/**/*.', './public/index.html'],  darkMode: false, // or 'media' or 'class' theme:  extend: >, >, variants:  extend: >, >, plugins: [], >

Read our separate guide on optimizing for production to learn more about tree-shaking unused styles for best performance.

Include Tailwind in your CSS

Open the ./src/index.css file that Create React App generates for you by default and use the @tailwind directive to include Tailwind’s base , components , and utilities styles, replacing the original file contents:

/* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities;

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system. Read our documentation on adding base styles, extracting components, and adding new utilities for best practices on extending Tailwind with your own custom CSS. Finally, ensure your CSS file is being imported in your ./src/index.js file:

 // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; + import './index.css';  import App from './App'; import reportWebVitals from './reportWebVitals';  ReactDOM.render( React.StrictMode> App /> /React.StrictMode>, document.getElementById('root') );  // .

You’re finished! Now when you run npm run start , Tailwind CSS will be ready to use in your Create React App project. Next learn about the utility-first workflow →

Установите Tailwind CSS с Create React App

Начните с создания нового проекта Create React App, если у вас его еще нет. Самый распространенный подход — использовать Create React App:

npx create-react-app my-project cd my-project

Настройка Tailwind CSS

Установка Tailwind через npm

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create React App не пока поддерживает PostCSS 8 поэтому вам необходимо установить сборку совместимости с Tailwind CSS v2.0 PostCSS 7, как мы показали выше.

Установить и настроить CRACO

Поскольку Create React App не позволяет вам изначально переопределить конфигурацию PostCSS, нам также необходимо установить CRACO, чтобы иметь возможность настраивать Tailwind:

После его установки обновите ваши scripts в файле package.json , чтобы использовать craco вместо react-scripts для всех скриптов, кроме eject :

  // . "scripts":  - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test",  "eject": "react-scripts eject" >, >

Затем создайте craco.config.js в корне нашего проекта и добавьте tailwindcss и autoprefixer как плагины PostCSS:

// craco.config.js module.exports =  style:  postcss:  plugins: [ require('tailwindcss'), require('autoprefixer'), ], >, >, >

Если вы планируете использовать какие-либо другие плагины PostCSS, вам следует прочитать нашу документацию по использованию PostCSS в качестве препроцессора для получения более подробной информации о том, как лучше всего заказать их вместе с Tailwind.

Создайте свою конфигурацию файл

npx tailwindcss-cli@latest init

// tailwind.config.js module.exports =  purge: [], darkMode: false, // or 'media' or 'class' theme:  extend: >, >, variants:  extend: >, >, plugins: [], >

Настройте Tailwind, чтобы удалить неиспользуемые стили в продакшене

В вашем файле tailwind.config.js , настройте опцию purge , указав пути ко всем вашим components, чтобы Tailwind мог изменять дерево неиспользуемых стилей в производственных сборках:

 // tailwind.config.js module.exports =  - purge: [], + purge: ['./src/**/*.', './public/index.html'],  darkMode: false, // or 'media' or 'class' theme:  extend: >, >, variants:  extend: >, >, plugins: [], >

Прочтите наше отдельное руководство по оптимизации для продакшена, чтобы узнать больше о древовидных неиспользуемых стилях для лучшей производительности.

Включите Tailwind в свой CSS

Откройте файл ./src/index.css , который Create React App генерирует для вас по умолчанию , и используйте директиву @tailwind , чтобы включить утилиты Tailwind base , components и utilities стили, заменяющие исходное содержимое файла:

/* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities;

Tailwind заменит эти директивы во время сборки на все стили, которые он генерирует на основе вашей настроенной дизайн-системы. Прочтите нашу документацию по добавлению базовых стилей, извлечению компонентов, и добавлению новых утилит для лучшие практики по расширению Tailwind с помощью вашего собственного CSS. Наконец, убедитесь, что ваш файл CSS импортируется в файл ./src/index.js :

 // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; + import './index.css';  import App from './App'; import reportWebVitals from './reportWebVitals';  ReactDOM.render( React.StrictMode> App /> /React.StrictMode>, document.getElementById('root') );  // .

Вы закончили! Теперь, когда ты бежишь npm run start , Tailwind CSS будет готов к использованию в вашем проекте Create React App. Далее узнайте о рабочем процессе “сначала утилиты” →

На этой странице

Источник

Tailwind css with react