Electron(일렉트론) ERB에서 TailwindCSS 적용

Electron React Boilerplate(ERB)에서 TailwindCSS를 적용하는 방법을 알아보겠습니다.

 

ERB를 시작하는 방법은 아래 글을 참고하세요.

https://bundw.tistory.com/78

Electron(일렉트론) React(리액트) ERB로 데스크톱 앱 만들기

 

구글링으로 ERB+TailwindCSS의 여러 글을 참고하고 적용해 보았지만, 모두 제대로 작동하지 않아 직접 해결해보면서 그 과정을 기록하고자 이 글을 작성하게 되었습니다.

 

이 글은 아래 Package 버전 기준으로 작성되었습니다.

• npm 6.14.8
• electron ^16.0.5
• tailwindcss ^3.0.16
• postcss ^8.4.5
• postcss-loader ^6.2.1
• autoprefixer ^10.4.2

 

먼저, 필요 Package를 추가합니다.

$ npm i --save-dev tailwindcss postcss postcss-loader autoprefixer

 

추가가 완료되면 root위치에서 tailwind.config.js파일을 생성하고 아래 내용을 저장합니다.

import colors from 'tailwindcss/colors';

module.exports = {
  content: [
    './src/**/*.{html,js,tsx}',
  ],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        sky: colors.sky,
        cyan: colors.cyan,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

 

.erb/configs/위치에서 postcss.config.js파일을 생성하고 아래 내용을 저장합니다.

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

 

.erb/configs/webpack.config.renderer.dev.ts파일과 .erb/configs/webpack.config.renderer.prod.ts파일에서 module.rules 내용을 아래 내용으로 교체합니다. (또는 postcss-loader 부분을 적절히 추가해도 됩니다.)

...
module: {
  rules: [
    {
      test: /\.s?css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            sourceMap: true,
            importLoaders: 1,
          },
        },
        'sass-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [require('tailwindcss'), require('autoprefixer')],
            },
          },
        },
      ],
      include: /\.module\.s?(c|a)ss$/,
    },
    {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [require('tailwindcss'), require('autoprefixer')],
            },
          },
        },
      ],
      exclude: /\.module\.s?(c|a)ss$/,
    },
    // Fonts
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
    },
    // Images
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource',
    },
  ],
},
...

 

이렇게 해서 환경 준비는 끝났습니다.

 

 

사용하고자 하는 렌더 페이지에서 css참조를 추가합니다.

import 'tailwindcss/tailwind.css';

 

아래와 같이 TailwindCSS를 적용해봅니다.

import { MemoryRouter as Router, Routes, Route, Link } from 'react-router-dom';
import icon from '../../assets/icon.svg';
import 'tailwindcss/tailwind.css';
import './App.css';

const Tailwind = () => {
  return (
    <div className="text-center border-solid border-4 border-red-500 bg-black text-white shadow">
      ERB + TAILWIND = ❤
    </div>
  );
};

const Hello = () => {
  return (
    <div>
      <div className="Hello">
        <img width="200px" alt="icon" src={icon} />
      </div>
      <h1>electron-react-boilerplate</h1>
      <Tailwind />
      ...

 

잘 적용되었습니다.