Tailwind

Overview#

Tailwind was created and primary focusing on css part. That make it much more faster than others css-in-js frontend framework. But that also mean it is lower level, and might not be the best for quick release cycle project and performance favor.

General ideas#

There are 3 main parts of the lib:

• @tailwind base: should only apply for global element(like your global css reset).
• @tailwind components: should only apply for complex component classes.
• @tailwind utilities: should only apply for custom classes (globally ofcourse).
• Plugins: This optional part highly depend on what specific project requirement.

Customization#

• Theme configuration reference

Setup#

Using Next.Js. Plain react projects was not likely need to perf that tailwind offer (along with all the overhead of re-build many things with it). Detail installation can be found here

For moduling tailwind:

yarn add postcss-import -D
# For sass support
yarn add sass postcss-import -D

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

// For sass support
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Personal optinate#

Cascading... or scope ?#

From the point of backend-heavy point of view. I was more favor of scope css process (which might refer as css modules). This ensure postfix all module class name with somethign to make it unique, therefore their styles was scoped and not cascade down to other component. This was so nice for many others library which have their own custom - ready to use components, and those whose doesn't want to mess with the cascade things.

But things might change quite a bit with tailwind, which primary focus on css part. So, in order to harvest that power, we need somehow make a compromise with the idea behind it. Ofcourse, css modules would work, but why not drill a little deepper to gain something more cool that the framework offer ?

That bring naming convention back to top, and BEM naming convention might help us solve just exactly that.