Добавьте Tailwind CSS в популярный шаблон Electron React Boilerplate (ERB)

Поскольку это заняло у меня больше времени, чем следовало, и поскольку конфигурация веб-пакетов ERB довольно запутанная, я решил поделиться с вами, как я добавил TailwindCSS в свой проект ERB.

Следующие шаги могут отличаться в будущих версиях, но основа должна быть очень похожей.

Во-первых, я установил зависимости

yarn add tailwindcss postcss-loader autoprefixer postcss -D

Затем я создал файл postcss.config.js со следующей конфигурацией и поместил его в корень:

module.exports = {
   plugins: [require(‘tailwindcss’), require(‘autoprefixer’)]
}

За ним следует пустой файл tailwind.config.js, также помещенный в корень:

module.exports = {
   theme: {},
   variants: {},
   plugins: []
}

Затем я добавил правило после правила css-loader в webpack.config.renderer.dev.babel.js

{
 loader: ‘postcss-loader’,
 options: {
 postcssOptions: {
 plugins: [require(‘tailwindcss’), require(‘autoprefixer’)],
 },
 }
}

[Вставить полный файл конфигурации]

И для хорошего самочувствия я сделал то же самое после sass-loader в webpack.config.renderer.prod.babel.js

{
 loader: ‘postcss-loader’,
 options: {
 postcssOptions: {
 plugins: [require(‘tailwindcss’), require(‘autoprefixer’)],
 },
 }
}

[Вставить полный файл конфигурации]

Наконец, я добавил следующий импорт попутного ветра в app.global.css

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

И чтобы проверить это, я добавил в свой компонент App.tsx следующее:

<div className=”absolute inset-0 bg-white text-center h-full flex flex-col justify justify-center”>ERB + TAILWIND = ❤</div>

И радуйтесь!

Большое спасибо за чтение, надеюсь, я сэкономил вам время и, как всегда, не забывай пить воду!