Coming to Terms with Tailwind
The underlying problem I see that Tailwind solves is component-izing a single idea. And that it doesn&#x27;t get in the way with opinions like Bootstrap, et al. It does that pretty well. You can point to a single stack of code and say &quot;this one thing is a navbar&quot; and it&#x27;s easy to know where to make changes. No searching, no stress.<p>What I haven&#x27;t seen Tailwind do well on my projects is respond to change in the same way other methods would. I&#x27;m not saying it isn&#x27;t possible, just that the several projects I&#x27;ve seen, it was a big pain.<p>A method I&#x27;ve been quite fond of to accomplish the same task, but remove the difficulties this author&#x27;s other posts articulate, is to recreate the concept of a component in a single folder. Much like you would a Vue single-file component. If you read the &quot;Components&quot; heading here you&#x27;ll get a good feel for it by looking at the folder&#x2F;file structure:<p>* <a href="https:&#x2F;&#x2F;github.com&#x2F;flyntwp&#x2F;flynt#components" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;flyntwp&#x2F;flynt#components</a><p>That same idea I&#x27;ve enabled in a framework&#x2F;language-agnostic way with an NPM module I created (not public). It watches the folder, namespaces css&#x2F;js like a single-file Vue component would (using a manifest name or defaults to the folder name). It&#x27;s a freeing feeling to create a folder and just start coding sass and js without having to wire anything together. As it&#x27;s auto-namespaced, sass files are very clean too, you can use generic naming like &quot;.heading&quot; without a problem.<p>This solution is nice because:<p>1. devs get the &quot;one source of editing&quot; in a single folder. Even image assets or your language&#x27;s logic files.<p>2. Immense benefit with static analysis tools. Want to assert all your components have a readme.md? or generate docs from all component readmes? Sure.<p>3. it&#x27;s performant, with vendor&#x2F;tree-shaking and inheritance built in. Also parallel build execution of all components.<p>4. it&#x27;s agnostic to language&#x2F;frameworks. Include any linters or unit tests you want.<p>5. is a paradigm shift from themes to components, just like Tailwind<p>6. No more wiring together components! specify a global like Vue or your favorite sass package, and all components can inherit it<p>7. Simple setup.. all you do is point to a folder of components, specify a dist folder, and you&#x27;re done unless you want to modify specific behaviors<p>I&#x27;m curious if there are Tailwinders out there who could teach me if Tailwind solves other problems I&#x27;m not seeing. Or if this type of solution would be something I should open source. It ends up being a pretty simple Webpack file under the hood, and it has been an absolute dream to work with over the past year.