add basic tailwind setup

apps/explorer/postcss.config.js

@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

apps/explorer/project.json

@@ -16,7 +16,7 @@
         "polyfills": "apps/explorer/src/polyfills.ts",
         "tsConfig": "apps/explorer/tsconfig.app.json",
         "assets": ["apps/explorer/src/favicon.ico", "apps/explorer/src/assets"],
-        "styles": ["apps/explorer/src/styles.scss"],
+        "styles": ["apps/explorer/src/styles.css"],
         "scripts": [],
         "webpackConfig": "@nrwl/react/plugins/webpack"
       },

apps/explorer/src/app/components/splash-loader/splash-loader.tsx

@@ -1,8 +1,8 @@
-import "./splash-loader.scss";
+// import "./splash-loader.scss";
 
-import React from "react";
+import React from 'react';
 
-export const SplashLoader = ({ text = "Loading" }: { text?: string }) => {
+export const SplashLoader = ({ text = 'Loading' }: { text?: string }) => {
   const [, forceRender] = React.useState(false);
   React.useEffect(() => {
     const interval = setInterval(() => {

apps/explorer/src/app/components/splash-screen/splash-screen.tsx

@@ -1,6 +1,6 @@
-import "./splash-screen.scss";
+// import "./splash-screen.scss";
 
-import React from "react";
+import React from 'react';
 
 export const SplashScreen = ({ children }: { children: React.ReactNode }) => {
   return <div className="splash-screen">{children}</div>;

apps/explorer/src/app/routes/markets/index.tsx

@@ -149,7 +149,7 @@ const Markets = () => {
 
   if (!data || !data.markets) return null;
   return (
-    <section>
+    <section className="px-8 py-12">
       <h1>Markets</h1>
       {data.markets.map((m) => (
         <React.Fragment key={m.id}>

apps/explorer/src/app/routes/txs/id/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { TxContent, TxDetails } from '../../../components/txs';
 import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
 import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
 import { TendermintTransactionResponse } from '../tendermint-transaction-response.d';
-import { TxDetails, TxContent } from '../../../components/txs';
 
 const Tx = () => {
   const { txHash } = useParams<{ txHash: string }>();

apps/explorer/src/main.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
+import './styles.css';
 
 import App from './app/app';
 

apps/explorer/src/styles.css

@@ -0,0 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/explorer/src/styles.scss

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

apps/explorer/tailwind.config.js

@@ -0,0 +1,13 @@
+const { join } = require('path');
+const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const theme = require('../../libs/tailwindcss-config/src/theme');
+
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  darkMode: 'class',
+  theme,
+  plugins: [],
+};