Gatsby with styled-components - cannot disable preflight

[talohana]

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 tailwind.config.js is getting picked, since i'm inspecting a h2 tag for example and resets like margin: 0 inherited from base.min.css

Versions:
twin.macro - 1.10.0
tailwindcss - 1.8.10

[ben-rogerson]

It's not preflight that's the issue, I think you may just be missing the autoCssProp in your config:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    config: 'tailwind.config.js',
    preset: 'styled-components',
    autoCssProp: true,
    debugProp: true,
    debugPlugins: false,
    debug: false,
  },
}

If you're going to use any of the animate-xxx classes then be sure to use the new GlobalStyles import instead of the base.min.css import.

Docs: Use Twin with Gatsby + Styled Components

[talohana]

It's not preflight that's the issue, I think you may just be missing the autoCssProp in your config:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    config: 'tailwind.config.js',
    preset: 'styled-components',
    autoCssProp: true,
    debugProp: true,
    debugPlugins: false,
    debug: false,
  },
}

If you're going to use any of the animate-xxx classes then be sure to use the new GlobalStyles import instead of the base.min.css import.

Docs: Use Twin with Gatsby + Styled Components

Unfortunately I get the same result with this config, the styles are still inherited from base.min.css

[ben-rogerson]

Just re-read the question, try removing your base.min.css import - that's the file with the reset (preflight) styles in there.
Here's the contents so you can copy the required pieces of it into your existing reset (I'm assuming).

[ben-rogerson]

Repost so I can mark it as the answer:

The preflight styles are added with the base.min.css import and the GlobalStyles 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.