PostCSS & Tailwind
PostCSS
PostCSS is a compiler for CSS. It enables buildtime transformation of CSS files to convert SCSS, LESS, or other CSS-like languages into standard CSS. It also has utilities for polyfills and browser-specific prefixes. I think of it like a swiss-army knife for CSS: it helps assure that your styling intentions are actually rendered uniformily across browsers.
PostCSS support is handled as a buildtime plugin with Mountaineer. It's disabled by default. To enable, make sure you have postcss-cli
installed within your views
project:
npm install postcss-cli
After this you can leverage the PostCSSBundler
within your custom build pipeline:
from mountaineer.client_compiler.postcss import PostCSSBundler
controller = AppController(
custom_builders=[
PostCSSBundler(),
],
)
Adding the PostCSSBundler will find all the .css
that you have specified within your views
directory and pass them through PostCSS. Let's say you have the following CSS files:
/views/app/home/style.css
/views/app/detail/style.css
The compiler will pass each through PostCSS and deposit these artifacts into:
/views/_static/home_style.css
/views/_static/detail_style.css
You can then import this CSS file in whatever tag is relevant to your project. See the metadata documentation for more details on how to do this.
Tailwind
Tailwind uses PostCSS to handle the tree shaking and project analysis that allows it to output the minimal amount of CSS tags to correctly render your project. If you set up the PostCSS extension like described above, you should be able to follow the typical Tailwind setup steps.
module.exports = {
content: ["./app/**/*.{html,tsx,jsx,ts,js}"],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
Then export the built styles into your global metadata:
controller = AppController(
config=AppConfig(),
global_metadata=Metadata(
links=[LinkAttribute(rel="stylesheet", href="/static/app_main.css")]
),
custom_builders=[
PostCSSBundler(),
],
)