Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/siveing/next-purge-css
- Owner: siveing
- License: mit
- Created: 2023-12-28T06:38:20.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-02T04:28:25.000Z (about 1 year ago)
- Last Synced: 2024-11-16T05:27:43.161Z (2 months ago)
- Topics: nextjs, postcss, purgecss, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 71.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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)