fix: remove twind from project (#244)

README.md

@@ -41,7 +41,6 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
 - [Vite](https://vitejs.dev/)
 - [SASS](https://sass-lang.com/)
-- [Twind](https://twind.dev/)
 - [Prettier](https://prettier.io/)
 - [ESLint](https://eslint.org/)
 - [Husky](https://typicode.github.io/husky/getting-started.html#automatic-recommended)

package.json

@@ -33,9 +33,6 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@rollup/plugin-typescript": "^8.5.0",
     "@testing-library/react": "13.4.0",
-    "@twind/core": "^1.1.3",
-    "@twind/preset-autoprefix": "^1.0.7",
-    "@twind/preset-tailwind": "^1.1.4",
     "@types/chrome": "0.0.224",
     "@types/jest": "29.0.3",
     "@types/node": "18.15.11",

src/pages/content/components/Demo/app.tsx

@@ -5,5 +5,5 @@ export default function App() {
     console.log('content view loaded');
   }, []);
 
-  return <div className="text-lime-400">content view</div>;
+  return <div className="">content view</div>;
 }

src/pages/content/components/Demo/index.tsx

@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import App from '@src/pages/content/components/Demo/app';
 import refreshOnUpdate from 'virtual:reload-on-update-in-view';
-import { attachTwindStyle } from '@src/shared/style/twind';
 
 refreshOnUpdate('pages/content');
 
@@ -22,6 +21,5 @@ shadowRoot.appendChild(rootIntoShadow);
  * In the firefox environment, the adoptedStyleSheets bug may prevent contentStyle from being applied properly.
  * Please refer to the PR link above and go back to the contentStyle.css implementation, or raise a PR if you have a better way to improve it.
  */
-attachTwindStyle(rootIntoShadow, shadowRoot);
 
 createRoot(rootIntoShadow).render(<App />);

src/pages/newtab/Newtab.tsx

@@ -21,7 +21,6 @@ const Newtab = () => {
           Learn React!
         </a>
         <h6>The color of this paragraph is defined using SASS.</h6>
-        <span className="text-lime-400">The color of this paragraph is defined using Tailwind CSS.</span>
         <button
           style={{
             color: theme === 'light' ? '#fff' : '#000',

src/pages/newtab/index.tsx

@@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
 import Newtab from '@pages/newtab/Newtab';
 import '@pages/newtab/index.css';
 import refreshOnUpdate from 'virtual:reload-on-update-in-view';
-import { attachTwindStyle } from '@src/shared/style/twind';
 
 refreshOnUpdate('pages/newtab');
 
@@ -12,7 +11,6 @@ function init() {
   if (!appContainer) {
     throw new Error('Can not find #app-container');
   }
-  attachTwindStyle(appContainer, document);
   const root = createRoot(appContainer);
 
   root.render(<Newtab />);

src/pages/options/Options.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import '@pages/options/Options.css';
 
 const Options: React.FC = () => {
-  return <div className="container text-lime-400">Options</div>;
+  return <div className="container">Options</div>;
 };
 
 export default Options;

src/pages/panel/Panel.tsx

@@ -4,7 +4,7 @@ import '@pages/panel/Panel.css';
 const Panel: React.FC = () => {
   return (
     <div className="container">
-      <h1 className="text-lime-400">Dev Tools Panel</h1>
+      <h1 className="">Dev Tools Panel</h1>
     </div>
   );
 };

src/pages/panel/index.tsx

@@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
 import Panel from '@pages/panel/Panel';
 import '@pages/panel/index.css';
 import refreshOnUpdate from 'virtual:reload-on-update-in-view';
-import { attachTwindStyle } from '@src/shared/style/twind';
 
 refreshOnUpdate('pages/panel');
 
@@ -12,7 +11,6 @@ function init() {
   if (!appContainer) {
     throw new Error('Can not find #app-container');
   }
-  attachTwindStyle(appContainer, document);
   const root = createRoot(appContainer);
   root.render(<Panel />);
 }

src/pages/popup/Popup.tsx

@@ -13,7 +13,7 @@ const Popup = () => {
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p className="text-lime-400">
+        <p className="">
           Edit <code>src/pages/popup/Popup.tsx</code> and save to reload.
         </p>
         <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">

src/pages/popup/index.tsx

@@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
 import '@pages/popup/index.css';
 import Popup from '@pages/popup/Popup';
 import refreshOnUpdate from 'virtual:reload-on-update-in-view';
-import { attachTwindStyle } from '@src/shared/style/twind';
 
 refreshOnUpdate('pages/popup');
 
@@ -12,7 +11,6 @@ function init() {
   if (!appContainer) {
     throw new Error('Can not find #app-container');
   }
-  attachTwindStyle(appContainer, document);
   const root = createRoot(appContainer);
   root.render(<Popup />);
 }