I love static websites! The technology is pure magic 🦄 and joy. Any HTML file is an infinite canvas that you can paint with all the colors of the world.
However, being a human means dealing with limited period of living, so I always seek for better options to do my job. In the case of websites, it means efficient management of assets like images and styles. In this article, I'll talk about the latter.
Tailwind CSS project came into sight on my technology radar a while ago. They provide convenient, and potentially scalable, way to control stylesheets.
The tool surprisingly have only a few rough edges:
- adding custom classes could be slow;
- classes sometimes has inconsistent naming and hard to memoize.
First item is not always an issue, since most of the time you never leave your HTML files. Still, Tailwind CSS generate a lot of output during development, and it doesn't feel like adding a class to plain CSS file.
UPD JIT compiler was merged from sandbox to the mainline, allowing for significantly reduced build times. It has some known limitations, but already worth a try.
Second item could be mitigated by writing more of your own component and utility classes. Some plugins for VS Code like Tailwind CSS IntelliSense and Tabnine Autocomplete AI will help too.
One empty area about Tailwind CSS, there is no way to quckly create a project. Many tools exists to bootstrap it together with some JavaScript framework but none to create a simple HTML﹢CSS page that can be grown in any direction.
So I decided to create a convenient way to start new projects based on the Tailwind CSS. When you have NPM installed, simply hit a following command in the console:
npm init css-project -- awesome
When done, go to the newly created directory "awesome", and run the project in development mode. Browser window will open and reflect any changes you make in "src" and "static" folders:
npm start
If you don't need browser sync to be up and running, another option is provided:
npm run dev:styles
To create a minified stylesheet before releasing your project to the wild, use the following command (you have to stop the previous one first to avoid conflicts):
npm run production:styles
And if you just want to preview your work without changing the stylesheet, you can always use a pre-configured browser sync as follows:
npm run sync:static
This initializer lives here github:andreythegeek/create-css-project and any contributions are most welcome. More options to come, so feel free to tap on ⭐ and 👁 buttons!