carbon-design-system / carbon-preprocess-svelte

Svelte preprocessors for the Carbon Design System
Apache License 2.0
68 stars 6 forks source link

Using optimizeCss with tailwind breaking css in sveltekit. #42

Closed z3tsubouou closed 1 year ago

z3tsubouou commented 1 year ago

After using optimizeCss, CSS size is decreased but tailwind styles are not working ( but some are applying ) when running yarn preview. Especially md:flex, md:pt-4 and lg:mb-3 etc styles are not working.

Then removed optimizeCss and after build CSS size is not decreased but tailwind all styles are applying.

z3tsubouou commented 1 year ago

This error is from purgecss so i am closing it. And i have fixed this error in a vague way.

optimizeCss({
      safelist: {
        // TODO: need improvement on regex
        // standard: [/[A-Za-z0-9-_:\/]+/g]
        standard: [
          /sm/g,
          /md/g,
          /lg/g,
          /xl/g,
          /2xl/g,
          /auto/g,
          /py/g,
          /hidden/g,
          /m/g,
          /p/g,
          /[A-Za-z0-9]\\:/g
        ]
      }
    })