Releases · Roman86/tailwindcss-scoped-preflight

scopedPreflightStyles({
  isolationStrategy: isolateForComponents('.comp'), // whatever
  modifyPreflightStyles: {
    html: {
      // removes the line-height for the html selector
      'line-height': null,
      // changes the font-family
      'font-family': '"Open Sans", sans-serif',
    },
    body: {
      // replaces the margin value for the body selector in preflight styles
      margin: '0 4px',
      // following won't have any effect as this property is not in the preflight styles
      color: 'red',
    },
  },
})

Assets 2

27 Mar 23:57

github-actions

v3.1.0

ccbc858

v3.1.0

modifyPreflightStyles option added (function syntax)

/** @type {import("tailwindcss").Config} */
const config = {
  // ... your Tailwind CSS config
  plugins: [
    // ... other plugins
    scopedPreflightStyles({
      isolationStrategy: ...
      modifyPreflightStyles: ({ selectorSet, property, value }) => {
        // let's say you want to override the font family
        if (property === 'font-family' && value !== 'inherit') {
          return '"Open Sans", sans-serif';
        }
        // if you want to remove some property - return null
        if (selectorSet.has('html') && property === 'line-height') {
          return null;
        }
      },
    }),
  ],
};