I have a gatsby-theme project and I'm using <code cla

try this in your gatsby-config.js <div class="sni

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

PurgeCss is not working with tailwindui about gatsby-plugin-purgecss HOT 12 CLOSED

anantoghosh commented on May 29, 2024

PurgeCss is not working with tailwindui

from gatsby-plugin-purgecss.

Comments (12)

kenjonespizza commented on May 29, 2024 1

I actually was able to get this working 👍 !

I'm using tailwind + tailwindui inside of my Gatsby-Theme. In my gatsby-theme's gatsby-config This is what worked for me.

{
  resolve: `gatsby-plugin-purgecss`,
  options: {
    tailwind: true,
    content: [
      path.join( process.cwd(), '../gatsby-theme-donations/src/**/!(*.d).{ts,js,jsx,tsx}' ),
    ],
  },
},

I'm actually not 100% why this works, but my guess is that when gatsbys runs/builds, it merges the site's & theme's gatsby-config files and then looks inside the theme's directory with that added code '

content: [
  path.join( process.cwd(), '../gatsby-theme-donations/src/**/!(*.d).{ts,js,jsx,tsx}' ),
],'

from gatsby-plugin-purgecss.

monsieurBoutte commented on May 29, 2024

try this in your gatsby-config.js

{
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [require('tailwindcss')],
      },
},
{
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: false,
        develop: false,
        tailwindcss: true,
        whitelistPatterns: [/[\w-/.:]+(?<!:)/g, /[\w-/:\.]+(?<!:)/g],
      },
},

also, I don't think you need the post.config.js file

from gatsby-plugin-purgecss.

anantoghosh commented on May 29, 2024

@kayali1411 can you show a component where tailwindcss/ui was imported and used?
and did printRejected print all the removed tailwind classes?

from gatsby-plugin-purgecss.

kayali1411 commented on May 29, 2024

@monsieurBoutte tailwindui is extended from tailwindcss with extra classes and transitions effect. So in order to use tailwindui you only need to update tailwind.config.js to load tailwindui as a plugin as shown below. So you use tailwindui in the same you use tailwindcss you only use the CSS classes in your components.
Yes, I did you can find below the removed tailwind classes array
tailwind.config.js

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
      require('@tailwindcss/ui')
  ],
};

nav component

return (
        <nav className="relative max-w-screen-xl mx-auto flex items-center justify-between px-4 sm:px-6">
            <div className="flex items-center flex-1">
                <div className="flex items-center justify-between w-full md:w-auto">
                    <a href="/">
                        <img className="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="" />
                    </a>
                    <div className="-mr-2 flex items-center md:hidden">
                        <button onClick={handleOpenTrue} type="button" className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                            <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div className="hidden md:block md:ml-10">
                    <a href="/" className="font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Product</a>
                    <a href="/" className="ml-10 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Features</a>
                    <a href="/" className="ml-10 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
                    <a href="/" className="ml-10 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Company</a>
                </div>
            </div>
            <div className="hidden md:block text-right">
                <span className="inline-flex rounded-md shadow-md">
                  <span className="inline-flex rounded-md shadow-xs">
                    <a href="/" className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                      Log in
                    </a>
                  </span>
                </span>
            </div>
        </nav>
    )

printRejected output

 Removed Selectors:  [ '.sr-only',
  '.not-sr-only',
  '.focus\\:sr-only:focus',
  '.focus\\:not-sr-only:focus',
  '.appearance-none',
  '.bg-fixed',
  '.bg-local',
  '.bg-scroll',
  '.bg-transparent',
  '.bg-white',
  '.bg-black',
  '.bg-gray-50',
  '.bg-gray-100',
  '.bg-gray-200',
  '.bg-gray-300',
  '.bg-gray-400',
  '.bg-gray-500',
  '.bg-gray-600',
  '.bg-gray-700',
  '.bg-gray-800',
  '.bg-gray-900',
  '.bg-cool-gray-50',
  '.bg-cool-gray-100',
  '.bg-cool-gray-200',
  '.bg-cool-gray-300',
  '.bg-cool-gray-400',
  '.bg-cool-gray-500',
  '.bg-cool-gray-600',
  '.bg-cool-gray-700',
  '.bg-cool-gray-800',
  '.bg-cool-gray-900',
  '.bg-red-50',
  '.bg-red-100',
  '.bg-red-200',
  '.bg-red-300',
  '.bg-red-400',
  '.bg-red-500',
  '.bg-red-600',
  '.bg-red-700',
  '.bg-red-800',
  '.bg-red-900',
  '.bg-orange-50',
  '.bg-orange-100',
  '.bg-orange-200',
  '.bg-orange-300',
  '.bg-orange-400',
  '.bg-orange-500',
  '.bg-orange-600',
  '.bg-orange-700',
  '.bg-orange-800',
  '.bg-orange-900',
  '.bg-yellow-50',
  '.bg-yellow-100',
  '.bg-yellow-200',
  '.bg-yellow-300',
  '.bg-yellow-400',
  '.bg-yellow-500',
  '.bg-yellow-600',
  '.bg-yellow-700',
  '.bg-yellow-800',
  '.bg-yellow-900',
  '.bg-green-50',
  '.bg-green-100',
  '.bg-green-200',
  '.bg-green-300',
  '.bg-green-400',
  '.bg-green-500',
  '.bg-green-600',
  '.bg-green-700',
  '.bg-green-800',
  '.bg-green-900',
  '.bg-teal-50',
  '.bg-teal-100',
  '.bg-teal-200',
  '.bg-teal-300',
  '.bg-teal-400',
  '.bg-teal-500',
  '.bg-teal-600',
  '.bg-teal-700',
  '.bg-teal-800',
  '.bg-teal-900',
  '.bg-blue-50',
  '.bg-blue-100',
  '.bg-blue-200',
  '.bg-blue-300',
  '.bg-blue-400',
  '.bg-blue-500',
  '.bg-blue-600',
  '.bg-blue-700',
  '.bg-blue-800',
  '.bg-blue-900',
  '.bg-indigo-50',
  '.bg-indigo-100',
  '.bg-indigo-200',
  '.bg-indigo-300',
  '.bg-indigo-400',
  '.bg-indigo-500',
  '.bg-indigo-600',
  '.bg-indigo-700',
  '.bg-indigo-800',
  ... 29230 more items ]

from gatsby-plugin-purgecss.

kayali1411 commented on May 29, 2024

@monsieurBoutte I added whitelistPatterns, it removed used and unused classes

from gatsby-plugin-purgecss.

kayali1411 commented on May 29, 2024

@monsieurBoutte
Actually I followed gatsby doc to install tailwindcss doc link
then tailwindui doc to enable UI plugin doc link

from gatsby-plugin-purgecss.

anantoghosh commented on May 29, 2024

Try this:
remove tailwind: true from the options and add

extractors: [
      {
        extractor: class {
          static extract(content) {
            return content.match(/[\w-/.:]+(?<!:)/g) || [];
          }
        },
        extensions: ['js', 'ts', 'jsx', 'tsx', 'md', 'mdx']
      }
    ];

from gatsby-plugin-purgecss.

kayali1411 commented on May 29, 2024

@anantoghosh
it removed the entire tailwindcss classes again.

gatsby-plugin-purgecss:
 Previous CSS Size: 1822.63 KB
 New CSS Size: 8.11 KB (-99.56%)
 Removed ~1814.52 KB of CSS

from gatsby-plugin-purgecss.

anantoghosh commented on May 29, 2024

Could you share a minimal repo?
The output looks normal, it is supposed to remove most of tailwind, just not the used classes.

from gatsby-plugin-purgecss.

kayali1411 commented on May 29, 2024

@anantoghosh
it is a gatsby-theme not starter in order to use it, you need to install it as npm package on another gatsby site.
And the theme is still under local development using yarn workspace so it is quite difficult to deliver a minimal repo since it requires airtable and algolia configuration.
Once I publish it on npm I will share gatsby site repo with you.

from gatsby-plugin-purgecss.

anantoghosh commented on May 29, 2024

Alright, I am sure you'll find a solution in the docs. Since the tailwind file is being purged it is being picked up properly, It's matching of the selectors which fails. By default gatsby-plugin-purgecss looks only in src folder for matching selectors, which can be configured by using the content option https://github.com/anantoghosh/gatsby-plugin-purgecss#content---from-purgecss
I believe that would be causing the issue in your case.

from gatsby-plugin-purgecss.

kayali1411 commented on May 29, 2024

Now it works without any issue.
@kenjwho thank you!

from gatsby-plugin-purgecss.

PurgeCss is not working with tailwindui about gatsby-plugin-purgecss HOT 12 CLOSED

Comments (12)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent