Merge pull request #18 from Zagrios/Update-Tailwind

Update tailwind setup

.erb/configs/webpack.config.renderer.dev.ts

@@ -76,14 +76,6 @@ const configuration: webpack.Configuration = {
             },
           },
           'sass-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: [require('tailwindcss'), require('autoprefixer')],
-              },
-            },
-          },
         ],
         include: /\.module\.s?(c|a)ss$/,
       },
@@ -96,8 +88,12 @@ const configuration: webpack.Configuration = {
           {
             loader: 'postcss-loader',
             options: {
-              postcssOptions: {
-                plugins: [require('tailwindcss'), require('autoprefixer')],
+            postcssOptions: {
+              plugins:
+                [
+                  require('tailwindcss'),
+                  require('autoprefixer'),
+                ]
               },
             },
           },

.erb/configs/webpack.config.renderer.prod.ts

@@ -58,14 +58,6 @@ const configuration: webpack.Configuration = {
             },
           },
           'sass-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: [require('tailwindcss'), require('autoprefixer')],
-              },
-            },
-          },
         ],
         include: /\.module\.s?(c|a)ss$/,
       },
@@ -78,8 +70,12 @@ const configuration: webpack.Configuration = {
           {
             loader: 'postcss-loader',
             options: {
-              postcssOptions: {
-                plugins: [require('tailwindcss'), require('autoprefixer')],
+            postcssOptions: {
+              plugins:
+                [
+                  require('tailwindcss'),
+                  require('autoprefixer'),
+                ]
               },
             },
           },

postcss.config.js

@@ -0,0 +1,6 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+module.exports = {
+  plugins: [tailwindcss, autoprefixer],
+};

src/renderer/App.tsx

@@ -10,6 +10,7 @@ import { useEffect } from "react";
 import { ThemeService } from "./services/theme.service";
 import { NotificationOverlay } from "./components/notification/notification-overlay.component";
 import { PageStateService } from "./services/page-state.service";
+import "tailwindcss/tailwind.css";
 
 export default function App() {
 
@@ -26,7 +27,7 @@ export default function App() {
             document.documentElement.classList.remove('dark');
         });
     }, []);
-  
+
 
   return (
     <div className="relative w-screen h-screen overflow-hidden flex bg-light-main-color-1 dark:bg-main-color-1 z-0 max-w-full">

tailwind.config.js

@@ -1,10 +1,8 @@
-
-
 const colors = require('tailwindcss/colors');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: 'class',
-  content: ['./src/renderer/**/*.tsx'],
+  content: ['./src/renderer/**/*.{js,jsx,ts,tsx,ejs}'],
   mode: 'jit',
   plugins: [require('tailwind-scrollbar-hide'), require('tailwind-scrollbar')({ nocompatible: true }), require("tailwindcss-scoped-groups")({groups: ["one"]})],
   theme:{