Gatsby with styled-components - cannot disable preflight #155
-
I'm setting up a project based on gatsby that uses styled-components and tailwindcss. I've followed this guide on how to add tailwind, but instead of using emotion I used styled-components. In my project I need to disable tailwindcss's preflight, i've tries the following settings with no success: // gatsby-browser.js
import 'tailwindcss/dist/base.min.css'; // gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-typescript`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`
}
}
]
}; // babel-plugin-macros.config.js
module.exports = {
twin: {
config: 'tailwind.config.js',
preset: 'styled-components',
debugProp: true,
debugPlugins: false,
debug: false
}
}; module.exports = {
future: {},
purge: [],
theme: {
extend: {}
},
variants: {},
corePlugins: {
preflight: false
},
plugins: []
}; At this point, i'm not even sure the Versions: |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
// babel-plugin-macros.config.js
module.exports = {
twin: {
config: 'tailwind.config.js',
preset: 'styled-components',
autoCssProp: true,
debugProp: true,
debugPlugins: false,
debug: false,
},
}
|
Beta Was this translation helpful? Give feedback.
-
Repost so I can mark it as the answer: The preflight styles are added with the Here's the latest base.min.css so you can copy the required pieces into your own reset. |
Beta Was this translation helpful? Give feedback.
Repost so I can mark it as the answer:
The preflight styles are added with the
base.min.css
import and theGlobalStyles
import.If you want to create your own preflight styles then don't include those imports in your project.
Here's the latest base.min.css so you can copy the required pieces into your own reset.