Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/siveing/next-purge-css

Implement the purge css to minimize the css and content with purge css
https://github.com/siveing/next-purge-css

nextjs postcss purgecss tailwindcss typescript

Last synced: about 23 hours ago
JSON representation

Implement the purge css to minimize the css and content with purge css

Awesome Lists containing this project

README

        

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Reference
Open [https://purgecss.com/introduction.html](https://purgecss.com/introduction.html)

Open [https://www.diffchecker.com/EFrFjgNy/](https://www.diffchecker.com/EFrFjgNy/) to see the diff between the purge css and no purge css. It about the remove the unused css and selector from css files.

## To see it

```bash
npm run build
# or
yarn build
# or
pnpm build
# or
bun build
```

The compatible with PostCss plugin

And go to ```.next``` folder and go to static path ```*******.css``` how css generated to matched your used selector tag and class.

![image](https://github.com/siveing/next-purge-css/assets/80828464/9d88513a-08fe-4103-99ed-b3e16add7520)

## Example of Extractor
![image](https://github.com/siveing/next-purge-css/assets/80828464/430094eb-39e9-4a55-8c54-0d2fb01aa113)