How to delete internal <style id="__twind">?

[nauvalazhar]

Hi, thank you for this cool library!

I was working on a React app project, everything went fine until I wrote my own Tailwind configuration. The configuration I wrote down lost in the specificity battle (because of generated internal style).

My configuration:

const plugin = require('tailwindcss/plugin')

module.exports = {
    purge: [],
    darkMode: 'media', // or 'media' or 'class'
    theme: {
        extend: {
            fontFamily: {
                sans: [
                    '"Source Sans Pro"',
                ], 
....

Specificity:

I found the internal style in DevTools which this library generates. In the documentation I found that to use the twind function I didn't need the setup function. How can I just use the twind function to group Tailwind classes? Without any internal styles and my configuration works fine.

Thanks.

[sastan]

You do not need to call the setup function. But if you want to customize the preflight eg the initial styles, or the theme you must. In your case there are two options which can be combined:

1. You can disable the preflight:

setup({ preflight: false })

2. Add your custom theme:

setup({
  theme: {
     extend: {
            fontFamily: {
                sans: [
                    '"Source Sans Pro"',
                ], 
            }
      }
  }
})

For more details see https://github.com/tw-in-js/twind/blob/main/docs/setup.md

[nauvalazhar]

Ah, I see. Thank you for your support.