electron-vite/electron-vite-react

Add a template for TailwindCSS

ihsansfd opened this issue · 7 comments

ihsansfd commented

I want to use TailwindCSS instead of SASS, but I really lack of the knowledge to set up the boilerplate. Maybe add another template for setting up Electron + React + TypeScript + Tailwind CSS?

RSS1102 commented

Maintaining too many templates can make maintainers tired, but we will consider replacing scss with TailwindCSS in the future.

For using Tailwind CSS, you can first understand its basic knowledge. It is very simple to replace sass, mainly in automatic updates.

samuelOsborne commented

hi @ihsansfd Its quiet simple to add Tailwind, these are the steps I took :

npm install -D tailwindcss
npx tailwindcss init

Create a tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

In app.css add the directives:

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

In package.json

    "dev": "vite && pnpm watch-tailwind",
    "watch-tailwind": "npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch",

Install postcss and prefixloader:

npm install -D postcss autoprefixer

Create a postcss.config.js file:

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

Run npm dev, should be able to see tailwind classes taking effect!

cc: @RSS1102

Bonus ➡️ Adding DaisyUI

npm i -D daisyui@latest

Add to tailwind.config.js

module.exports = {
  //...
    daisyui: {
    themes: ["cyberpunk", "dracula", "light", "...."]
  },
  plugins: [require("daisyui")],
}

In index.html:

<!DOCTYPE html>
<html lang="en" data-theme="cyberpunk">
....

Remove some of the default styling inside of index.css:

:root {
  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  /* color: rgba(255, 255, 255, 0.87);
  background-color: #242424; */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
  • 🎉2
ihsansfd commented

hi @ihsansfd Its quiet simple to add Tailwind, these are the steps I took :

npm install -D tailwindcss
npx tailwindcss init

Create a tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

In app.css add the directives:

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

In package.json

    "dev": "vite && pnpm watch-tailwind",
    "watch-tailwind": "npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch",

Install postcss and prefixloader:

npm install -D postcss autoprefixer

Create a postcss.config.js file:

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

Run npm dev, should be able to see tailwind classes taking effect!

cc: @RSS1102

Bonus ➡️ Adding DaisyUI

npm i -D daisyui@latest

Add to tailwind.config.js

module.exports = {
  //...
    daisyui: {
    themes: ["cyberpunk", "dracula", "light", "...."]
  },
  plugins: [require("daisyui")],
}

In index.html:

<!DOCTYPE html>
<html lang="en" data-theme="cyberpunk">
....

Remove some of the default styling inside of index.css:

:root {
  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  /* color: rgba(255, 255, 255, 0.87);
  background-color: #242424; */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

Thanks, it's indeed simple :)

gabrieljreed commented

Worked for me as well, except I had to change my tailwind.config.js to the following

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
RSS1102 commented

@samuelOsborne
Thank you for your guidance.
Sorry, I was busy with work before. I will start this soon.

By the way, what do you think about using unocss.
for #167.

hotdongdong commented

嗨@ihsansfd添加Tailwind很简单，这些是我采取的步骤：

npm install -D tailwindcss
npx tailwindcss init

创建一个tailwind.config.js文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在app.css中添加指令：

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

在package.json中

    "dev": "vite && pnpm watch-tailwind",
    "watch-tailwind": "npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch",

安装postcss和prefixloader：

npm install -D postcss autoprefixer

创建一个postcss.config.js文件：

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

运行npm dev，应该能够看到尾风类正在生效！

抄送：@RSS1102

奖金➡️添加DaisyUI

npm i -D daisyui@latest

添加到tailwind.config.js

module.exports = {
  //...
    daisyui: {
    themes: ["cyberpunk", "dracula", "light", "...."]
  },
  plugins: [require("daisyui")],
}

在index.html中：

<!DOCTYPE html>
<html lang="en" data-theme="cyberpunk">
....

删除index.css中的一些默认样式：

:root {
  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  /* color: rgba(255, 255, 255, 0.87);
  background-color: #242424; */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

Hello, after I complete the configuration, there will be an error of "module' is not defined" in tailwind.config.js and postcss.config.js. I would like to ask how to solve it. Or what configurations need to be changed to make it normal? Because in this case, it seems that tailwindcss will not fail properly.I would really appreciate it if you could help me.

caoxiemeihao commented

@hotdongdong Hey! 👋
It looks like @RSS1102 will be integrating Tailwindcss into this repository soon.

  • 👍2