@aubrey
To use stitches and tailwind together in a Next.js project, you can follow these steps:
- Install stitches and tailwind packages in your project:
1
|
npm install @stitches/react @stitches/core tailwindcss
|
- Create a stitches.config.ts file in the root of your project and configure stitches with tailwind:
1
2
3
4
5
6
7
8
9
10
|
import { createStyled } from '@stitches/react';
const { styled, css } = createStyled({
prefix: '',
tokens: {},
breakpoints: {},
utils: {},
});
export { styled, css };
|
- Create a global.css file in the root of your project and import tailwind CSS and any other global styles:
1
2
3
4
5
|
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Add any other global styles here */
|
- Configure tailwind in your tailwind.config.js file:
1
2
3
4
5
6
7
8
9
10
11
|
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
|
- Update your next.config.js to include stitches and tailwind:
1
2
3
4
5
6
7
|
const withStitches = require('@stitches/next/config');
module.exports = withStitches({
webpack(config) {
return config;
},
});
|
- Create a component using stitches and tailwind:
1
2
3
4
5
6
7
8
9
10
|
import { styled } from 'stitches.config.ts';
const Container = styled('div', {
// Styled component using Stitches
backgroundColor: 'bg-blue-500',
// Add Tailwind classes using className prop
'& p': 'text-blue-200',
'& button': 'bg-blue-600 hover:bg-blue-700',
});
|
- Import your global.css file in your _app.tsx:
1
2
3
4
5
6
7
|
import 'global.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
|
That's it! Your Next.js project should now be set up to use stitches and tailwind together. You can start creating components and styles using both libraries in your application.
