chore: remove tailwind and use plain css

Author: danielbarion

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: [danielbarion] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.prettierrc.json

@@ -6,6 +6,5 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "printWidth": 100,
-  "bracketSameLine": false,
   "endOfLine": "auto"
-}
+}

package.json

@@ -35,20 +35,18 @@
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "22.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "14.1.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-babel": "6.0.2",
+    "@rollup/plugin-commonjs": "23.0.2",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-replace": "5.0.1",
+    "@rollup/plugin-typescript": "9.0.2",
     "@types/css": "^0.0.33",
     "@types/css-modules": "^1.0.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
-    "autoprefixer": "^10.4.13",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "9.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "commitizen": "^4.2.5",
     "css-loader": "^6.3.0",
@@ -63,16 +61,16 @@
     "eslint-plugin-react": "^7.26.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^8.0.1",
-    "lint-staged": "^11.1.2",
-    "postcss": "^8.4.18",
+    "lint-staged": "13.0.3",
+    "postcss": "8.4.19",
     "prettier": "^2.4.1",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.57.0",
+    "rollup": "3.2.5",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-browsersync": "^1.3.3",
     "rollup-plugin-copy": "^3.4.0",
@@ -87,7 +85,6 @@
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
-    "tailwindcss": "^3.2.3",
     "typescript": "^4.8.4"
   },
   "peerDependencies": {

rollup.config.dev.js

@@ -3,7 +3,6 @@ import { string } from 'rollup-plugin-string'
 import analyze from 'rollup-plugin-analyzer'
 import commonjs from '@rollup/plugin-commonjs'
 import filesize from 'rollup-plugin-filesize'
-import json from '@rollup/plugin-json/dist'
 import postcss from 'rollup-plugin-postcss'
 import progress from 'rollup-plugin-progress'
 import browsersync from 'rollup-plugin-browsersync'
@@ -13,9 +12,6 @@ import copy from 'rollup-plugin-copy'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import ts from '@rollup/plugin-typescript'
 import typescript from 'typescript'
-import tailwindcss from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
-import tailwindConfig from './tailwind.config'
 
 const input = ['src/index-dev.tsx']
 
@@ -47,16 +43,9 @@ const plugins = [
     autoModules: true,
     include: '**/*.css',
     extensions: ['.css'],
-    plugins: [autoprefixer(), tailwindcss(tailwindConfig)],
-  }),
-  json(),
-  nodeResolve({
-    browser: true,
-
-    // Add this line for development config, omit for
-    // production config
-    exportConditions: ['development'],
+    plugins: [],
   }),
+  nodeResolve(),
   ts({
     typescript,
     tsconfig: './tsconfig.json',
@@ -84,6 +73,8 @@ const plugins = [
   browsersync({
     server: 'build',
     watch: true,
+    ui: false,
+    open: false,
     // port: 3000,
     // ui: {
     //   port: 3001,

src/App.tsx

@@ -13,9 +13,10 @@ import {
   FloatingPortal,
 } from '@floating-ui/react-dom-interactions'
 import { Tooltip } from 'components/Tooltip'
+import styles from './styles.module.css'
 
 function App() {
-  const [open, setOpen] = useState(true)
+  const [open, setOpen] = useState(false)
 
   const { x, y, reference, floating, strategy, context } = useFloating({
     open,
@@ -37,7 +38,7 @@ function App() {
   const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role])
 
   return (
-    <>
+    <main className={styles['main']}>
       <button ref={reference} {...getReferenceProps()}>
         Hover or focus me
       </button>
@@ -52,7 +53,7 @@ function App() {
           />
         )}
       </FloatingPortal>
-    </>
+    </main>
   )
 }
 

src/components/Tooltip/Tooltip.tsx

@@ -15,7 +15,7 @@ const Tooltip = ({ innerRef, strategy, y, x, floatingProps }: ITooltip) => {
       }}
       {...floatingProps}
     >
-      I'm a tooltip!
+      Hello World from a Tooltip
     </div>
   )
 }

src/components/Tooltip/styles.module.css

@@ -1,3 +1,3 @@
 .tooltip {
-  @apply bg-purple-500;
+  background-color: red;
 }

src/index-dev.tsx

@@ -1,5 +1,4 @@
 import { createRoot } from 'react-dom/client'
-import './tailwind.module.css'
 import App from './App'
 
 const container = document.getElementById('app')

src/index.tsx

@@ -1,3 +1 @@
-import './tailwind.module.css'
-
 export { default as App } from './App'

src/styles.module.css

@@ -0,0 +1,7 @@
+.main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+}