I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase.
I'm sure I'm missing something obvious, but I'm at a loss at this point.
tailwind.config.cjs
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
_app.js
import '../styles/globals.css'
import Menu from '../components/splash-menu';
import { AppWrapper } from '../context/dataContext';
import { UserWrapper } from '../context/userContext';
function MyApp({ Component, pageProps }) {
return (
<>
<AppWrapper>
<UserWrapper>
<Component {...pageProps} />
</UserWrapper>
</AppWrapper>
</>
)
}
export default MyApp
package.json
{
"name": "",
"version": "1.0.0",
"description": "A visualization and optimization insight tool for AWS Lambda",
"main": "/dist/index.js/",
"author": "",
"scripts": {
"clean": "rm dist/bundle.js",
"compile-dev": "npx tsc -w",
......(Add remaining text here).......
"webpack-dev-server": "^4.8.1"
}
}
globals.css
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
@tailwind base;
@tailwind components;
@tailwind utilities;