UI and CSS
In this chapter, we'll set up our UI library and CSS build process using PostCSS.
UI and CSS setup#
For this course, we'll be using a combination of Blueprint UI Framework and Tailwind CSS. Blueprint (or BlueprintJS) is a set of React UI components like modals, inputs, buttons etc. Tailwind CSS is a functional (or atomic) CSS framework that exposes utility classes that can be mixed to create responsive UIs.
Both BlueprintJS and Tailwind need a set of CSS classes to function. In combination, this leads to heavy CSS import. For development use, a large bundle size doesn't matter. For production use, you can easily minify CSS using any standard minifier, like PurgeCSS. This part is independent of Clojure.
It is distributed as
This installs the React components, but you still need to import CSS files to get the styles working.
At the time of this writing, the latest version of
@blueprintjs/icons (a package that
@blueprintjs/core depends on) throws a parsing error in Google Closure Compiler. If you see
Exception parsing "~/tinycanva/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js", you can fix it by installing an older version of
This section will be updated when the bug is resolved.
Tailwind is an atomic CSS library. It ships thousands of utility classes. For example: class names
m-n specify the style
Instead of adding a class to an element and styling that class, you add a class to the element for each style you want to apply. For example, if you have a
div and you'd like to set a border and padding on it, you can add the classes
border-solid p-2 to it. You can change the border color using the class
border-black (or pick from a variety of other colors). We recommend this 30-minute crash course by Traversy Media if you'd like to learn more about Tailwind.
Tailwind ships as an NPM package with some added dependencies and scripts for customization. We need the
To customize Tailwind with brand colors, we need to create a configuration file in the root directory (the directory containing
package.json). This can be done using the
tailwindcss binary that ships with the package:
This will create a file called
tailwind.config.js in the root directory. With this configuration, you can change the default fonts, colors, margin sizes etc.
PostCSS allows us to bundle, minify, and purify (remove unused classes from) CSS from a variety of CSS sources like Saas, Less, Stylus, etc. It ships with a plugin ecosystem to enhance various aspects of writing CSS.
We'll use PostCSS to compile Blueprint and Tailwind CSS styles. In our setup, we don't need to write any custom CSS as we will rely on Tailwind (and some inline styles). However, if you do need to write custom CSS, you can bundle and process that too with PostCSS:
We also need
postcss.config.js file to configure PostCSS plugins. Create this file in the project root and add the following configuration to it:
postcss-importplugin inlines import statements, ie takes the content of the imported file and puts it at the place it was imported, essentially leading to one compiled file
tailwindcssplugin gives access to TailwindCSS files and configuration
autoprefixerplugin automatically adds browser-specific prefixes like
webkit-to styles that need it
Create a CSS source directory#
We will store CSS files in the
src/css folder, then create a mechanism to process those files and import them in
Create Blueprint CSS source#
BlueprintJS requires three CSS files to function. We will create
src/css/blueprint.css to import these files. You can also configure PostCSS to inline the contents of these files leading to one compiled CSS file:
Then populate it with the following content: