PostCSS topic
PostCSS is a tool for transforming CSS with JavaScript. It can be used to develop a template language such as Sass and LESS. The PostCSS core consists of:
- CSS parser that generates an abstract syntax tree
- Set of classes that comprises the tree
- CSS generator that generates a CSS line for the object tree
- Code map generator for the CSS changes made#
There are official tools making it possible to use PostCSS with build systems such as Webpack, Gulp, and Grunt. There is also a console interface available. Browserify or Webpack can be used to open PostCSS in a browser.
The complete plugin list can be found on postcss.parts, with some examples listed below.
- Autoprefixer to add and clear browser prefixes.
- CSS Modules to get CSS selectors isolated and code organized. It is supplied as part of Webpack.
- stylelint to analyze CSS code for mistakes and check style consistency.
- stylefmt fixes the CSS code according to the stylelint settings.
- PreCSS to perform some Sass/Less preprocessing functions.
- postcss-preset-env to emulate features from unfinished CSS specification drafts.
- cssnano to make CSS smaller in size by getting rid of the spaces and rewriting the code.
- RTLCSS to change CSS code so that the design should be suitable for right-to-left writing (such is applied in Arabic and Hebrew).
- postcss-assets, postcss-inline-svg and postcss-sprites to work with graphics.
jigsaw-tailwindcss
Use Tailwind CSS with the Jigsaw static site generator.
cliff-wp-plugin-boilerplate
Cliff's WordPress plugin boilerplate
browser-extension
Browser Extension Template with ESbuild builds, support for React, Preact, Typescript, Tailwind, Manifest V3/V2 support and multi browser build including Chrome, Firefox, Safari, Edge, Brave.
postcss-each
PostCSS plugin to iterate through values
postcss-modules-example
How to use postcss-modules plugin
building-realworld-user-interfaces-using-tailwind
Demo of building real-world UIs using TailwindCSS
daisyui
🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library
postcss-easing-gradients
PostCSS plugin to create smooth linear-gradients that approximate easing functions.
webpack-tailwindcss
Use TailwindCSS with Webpack. Build your assets quickly with ESBuild.
laggard
Automatically generate CSS fallbacks for legacy browsers, built on PostCSS