diff --git a/apps/explorer/postcss.config.js b/apps/explorer/postcss.config.js
new file mode 100644
index 000000000..cbdd9c22c
--- /dev/null
+++ b/apps/explorer/postcss.config.js
@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};
diff --git a/apps/explorer/project.json b/apps/explorer/project.json
index 1b2ba94a7..bcc87eaa6 100644
--- a/apps/explorer/project.json
+++ b/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"
       },
diff --git a/apps/explorer/src/app/components/splash-loader/splash-loader.tsx b/apps/explorer/src/app/components/splash-loader/splash-loader.tsx
index ff1f7bae1..698fe714c 100644
--- a/apps/explorer/src/app/components/splash-loader/splash-loader.tsx
+++ b/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(() => {
diff --git a/apps/explorer/src/app/components/splash-screen/splash-screen.tsx b/apps/explorer/src/app/components/splash-screen/splash-screen.tsx
index 6c19137ca..c4da91c19 100644
--- a/apps/explorer/src/app/components/splash-screen/splash-screen.tsx
+++ b/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>;
diff --git a/apps/explorer/src/app/routes/markets/index.tsx b/apps/explorer/src/app/routes/markets/index.tsx
index 4a1f60f3c..5b9ab37f7 100644
--- a/apps/explorer/src/app/routes/markets/index.tsx
+++ b/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}>
diff --git a/apps/explorer/src/app/routes/txs/id/index.tsx b/apps/explorer/src/app/routes/txs/id/index.tsx
index b10f067ce..ee24647b2 100644
--- a/apps/explorer/src/app/routes/txs/id/index.tsx
+++ b/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 }>();
diff --git a/apps/explorer/src/main.tsx b/apps/explorer/src/main.tsx
index 0bb92da1b..5877922a0 100644
--- a/apps/explorer/src/main.tsx
+++ b/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';
 
diff --git a/apps/explorer/src/styles.css b/apps/explorer/src/styles.css
new file mode 100644
index 000000000..d3a1a9a30
--- /dev/null
+++ b/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;
diff --git a/apps/explorer/src/styles.scss b/apps/explorer/src/styles.scss
index 90d4ee007..e69de29bb 100644
--- a/apps/explorer/src/styles.scss
+++ b/apps/explorer/src/styles.scss
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
diff --git a/apps/explorer/tailwind.config.js b/apps/explorer/tailwind.config.js
new file mode 100644
index 000000000..1dd947e87
--- /dev/null
+++ b/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: [],
+};