To create rich user interfaces and experiences, CSS frameworks are used extensively. There are a number of reasons for this; firstly, it is easier to build structured layouts as most modern CSS frameworks provide tooling. Secondly, it helps in rapid prototyping and allows us to change the experience in a very agile manner.
But with so many frameworks to choose from, selecting the best fit depends on the level of flexibility you are looking for. In this review, we will be looking at tailwindcss
, a popular CSS framework that focuses on providing the most flexibility to the developers. Tailwind does not follow a particular design system, rather it allows the developer to build their own and at the same time abstracts boiler-plate code. If you are the type of person who wants complete flexibility of the style and are not too keen on overriding defaults provided by the framework then tailwind is the way to go.
Tailwind is a low-level framework and can almost be considered as a small utility wrapper for boilerplate stylings. It provides a set of directives to generate a CSS file that can be imported into your application. While it has many advantages and intuitive directives, setting it up in your project has quite a few steps if you want good control over what is auto-generated.
index.html
.<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel=”stylesheet” />
npm install tailwindcss
. Simply add the below statements to a CSS file in your project and run the command npx tailwindcss input.css -o output.css
to generate the CSS bundle.@tailwind base;
@tailwind components;
@tailwind utilities;
postcss
plugins like autoprefixer
. Then you can switch the @tailwind
directive with the @import
directive as shown below:@import “tailwindcss/base”;
@import “tailwindcss/components”;
@import “tailwindcss/utilities”;
postcss.config.js
file to resolve the styles:module.exports = {
plugins: [
// …
require(‘tailwindcss’),
require(‘autoprefixer’),
// …
]
}
The above-mentioned methods allow for no control over the generated CSS bundle. To take granular control you can create a tailwind-config.js
in the root folder of your project or run the command npx tailwindcss init
. The npx
command by default would create a minimal file with no defaults. If you want to change the name of the config script, then you can run npx tailwindcss init tailwind-config.js
. The same has to be propagated to the postcss config file as well, as demonstrated below:
module.exports = {
plugins: [
require(‘tailwindcss’)(‘./tailwind-config.js’),
]
}
npx tailwindcss init --full
, this would generate a configuration which is an exact mirror of the tailwind default. We would suggest that you customize this only after you have completely explored all the options. You can get the default configuration file and then pick and choose what styles you would want.
While traditional CSS frameworks are useful and extensive, they come at a cost. If your application is small, then the overhead of adding the library increases your overall application size. Another drawback is framework lock-in
making any refactor an empirical task. Alongside web standards, browsers are providing support for newer and better style rules. It is becoming far easier to build the layout without any such overheads.
#ui #web-development #javascript #software-development #css