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

Как использовать тему Tailwind в любом месте вашего приложения React

Сегодня мы собираемся использовать ResolveConfig от Tailwind, чтобы написать файл JavaScript, который мы можем использовать с … Tagged with React, Tailwindcss, учебник, JavaScript.

Сегодня мы собираемся использовать ResolveConfig от Tailwind, чтобы написать файл JavaScript, который мы можем использовать с React Context API Чтобы получить доступ к значениям из любой точки приложения.

Мы создадим небольшое приложение и покажем его в действии, переопределив некоторые стили из React Select библиотека.

Настройка

Мы идем с основным Создать приложение React шаблон. Давайте настроим это и установим зависимости на сегодня.

# Create app
npx create-react-app tailwind-theme-example
# Change into folder
cd tailwind-theme-example
# Install dependencies
yarn add tailwindcss \
  react-select \
  prettier
# Create a bin folder for us to write our JS generation script
mkdir bin
touch bin/generate-tailwind-theme
# Add execution permissions
chmod u+x bin/generate-tailwind-theme

Конфигурация ветра

Мы хотим иметь tailwind.config.js Файл, который можно использовать для расширения по умолчанию. Мы не будем делать с этим слишком много сегодня, но давайте создадим его для использования без нашего сценария позже.

# Setup tailwind config file
npx tailwindcss init

Это создаст tailwind.config.js Файл в корневом каталоге, который выглядит так:

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Давайте теперь напишем наш скрипт, который будет ссылаться на этот файл.

Обновление нашего скрипта

Внутри Bin/Generate-TailWind-Theme , обновить файл, чтобы иметь следующее:

#!/usr/bin/env node

const fs = require("fs")
const resolveConfig = require("tailwindcss/resolveConfig")
const prettier = require("prettier")
const path = require("path")
// bring in the Tailwind config
const tailwindConfig = require("../tailwind.config.js")

const { theme } = resolveConfig(tailwindConfig)
const themeStr = JSON.stringify(theme)
const js = `
const theme  = ${themeStr}

export default theme
`

try {
  // write the file to src/theme.js after
  // having prettier format the string for us
  fs.writeFileSync(
    path.resolve(process.cwd(), "./src/theme.js"),
    prettier.format(js, { parser: "babel" }),
    "utf-8"
  )
} catch (err) {
  // uh-oh, something happened here!
  console.log(err.message)
}

Здесь мы выполняем эти шаги:

  1. Используйте ResolveConfig от Tailwind до объединения нашей конфигурации и их конфигурации по умолчанию. Мы разрушаем тема из результата.
  2. Строка тема Значение и интерполируйте его в строке JS . Эта строка действительна JavaScript.
  3. Написание этого файла в src/theme.js После того, как наша красивая библиотека форматирует это.

Теперь мы можем запустить это, используя Bin/Generate-TailWind-Theme Анкет Если это не сработает, вам может потребоваться проверить, что у вас есть правильные разрешения, а Шебанг (#!) Ссылка на установку узла. Если это не сработает, не стесняйтесь бежать Node Bin/Generate-TailWind-Theme и посмотрите, что произойдет.

Тема вывода

После успеха короткий взгляд на наш src/theme.js Файл должен выглядеть следующим образом:

const theme = {
  screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px" },
  colors: {
    transparent: "transparent",
    current: "currentColor",
    black: "#000",
    white: "#fff",
    gray: {
      "100": "#f7fafc",
      "200": "#edf2f7",
      "300": "#e2e8f0",
      "400": "#cbd5e0",
      "500": "#a0aec0",
      "600": "#718096",
      "700": "#4a5568",
      "800": "#2d3748",
      "900": "#1a202c",
    },
    // ... the rest has been omitted for brevity
  },
  // ... the rest has been omitted for brevity
}

export default theme

Потрясающий! Теперь у нас есть конфигурация темы, которую мы можем использовать в контексте React.

Настройка поставщика для нашего приложения

Обновите src/app.jsx Файл, чтобы выглядеть следующим образом:

import React, { createContext } from "react"
import theme from "./theme"
import { Select } from "./Select"
import "./App.css"

export const ThemeContext = createContext(theme)

function App() {
  const [select, setSelect] = React.useState()

  return (
    
      
  )
}

export default App

Themecontext что мы создали с помощью CreateContext позволит теме быть доступной с UseContext зацепите на протяжении всего нашего приложения!

На данный момент наше приложение не будет запущено (мы не создали наш файл select ).

Мы собираемся написать файл адаптера для нашего Выберите составная часть.

Создайте адаптер выбора

Добавить новый Выберите Файл компонента.

touch src/Select.jsx

Теперь внутри это src/select.jsx Файл, добавьте следующее:

import React from "react"
import BaseSelect from "react-select"
import { ThemeContext } from "./App"
export const Select = props => {
  const theme = React.useContext(ThemeContext)

  const customStyles = {
    control: (provided, state) => ({
      ...provided,
      zIndex: theme.zIndex["10"],
      fontFamily: theme.fontFamily.sans.join(","),
      fontSize: theme.fontSize.base,
      borderColor: state.isFocused
        ? theme.colors.blue["500"]
        : theme.colors.gray["300"],
      borderWidth: theme.borderWidth["2"],
      outline: "none",
      boxShadow: "none",
      "&:hover": {
        borderColor: state.isFocused
          ? theme.colors.blue["500"]
          : theme.colors.gray["500"],
      },
    }),
    menu: provided => ({
      ...provided,
      fontFamily: theme.fontFamily.sans.join(","),
      fontSize: theme.fontSize["text-base"],
    }),
    option: (provided, state) => ({
      ...provided,
      backgroundColor: state.isSelected
        ? theme.colors.blue["500"]
        : theme.colors.white,
      "&:hover": {
        ...provided["&:hover"],
        backgroundColor: theme.colors.blue["700"],
        color: theme.colors.white,
      },
    }),
  }

  return 
}

В этом файле мы экспортируем BASESELECT С некоторыми стилями по умолчанию, которые поступают из наших тема Анкет

Эти ценности темы поступают из Theme.js объект, который добавил в наш контекст! Это возможно на линии const.usecontext (hemecontext) Где мы установили тему, чтобы получить из нашего контекста, мы установили в App.js Анкет

Здесь нужно отметить, что у семьи шрифтов есть ценность theme.fontfamily.sans.join ("") Анкет В основном, Fontfamily Ключевые значения – это массив, поэтому он будет действительным для Фонт-семья Свойство CSS, мы хотим присоединиться к этому массиву, чтобы иметь место между каждым значением т.е. ['Open Sans', 'sans-serif'] В качестве примера станет Open Sans, Sans-Serif Анкет

Этот стиль не идеален. Это всего лишь некоторые стили, с которыми я играл этим утром, но они иллюстрируют смысл.

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

Давайте подведем наше приложение и пойдем нормально:

yarn start

Теперь вы можете увидеть, что у нас применяется стили темы Tailwind!

Теперь мы можем увидеть эти изменения в действии. Если мы вернемся к нашему src/select.jsx Подайте и замените все экземпляры Theme.colors.blue с Theme.colors.teal , теперь вы увидите Тил!

Поздравляю, теперь у вас есть доступ к ценностям темы Tailwind в вашем приложении React!

Ресурсы и дальнейшее чтение

  1. Заполненный проект на GitHub
  2. React Select – пользовательские стили
  3. Tailwind – ссылка на JavaScript
  4. React Context API

Изображение предоставлено: Ибрагим Асад

Первоначально опубликовано на моем блог . Следуйте за мной в Твиттере за более скрытыми драгоценными камнями @dennisokeeffe92 .

Оригинал: “https://dev.to/okeeffed/how-to-use-your-tailwind-theme-anywhere-throughout-your-react-app-2a6i”

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