Tailwind is a CSS utility. I was very sceptical when I first heard about it. Who needs any other boring Bootstrap-type framework that makes all websites look alike? And it's Javacript. And those class names. So confusing. So complicated. Leave me to my manual tinkerings. Away with you.
Well I was wrong. Tailwind is pretty cool.
Tailwind basically takes the process I was already using: Creating utility classes to apply chunks of CSS to html elements. And makes it beautifully easy. The utility classes are really easy to remember. If I can remember them anyone can.
You can also add you own CSS. Make your own type scales, colour schemes, breakpoints. You can add plug ins like Typography and Autoprefixer. It's very flexible and easy to use.
This is all controlled though a file in your project's root folder called tailwind.config.js.
The Tailwind documentation is great. So I won't teach you to suck eggs. Also they are a choke hazard. So don't do that.
My own version was called Caligula. It's a Latin pun. Yeah, I did Latin at school so what? Look it up, you Barbarian*. Caligula is also a better name than Tailwind. Tailwind sounds, well, windy.
The downside to Tailwind is that it creates messy markup. But apart from (possibly) you, and overly cheerful (yet black-hearted) UX/UI** influencers, who the hell cares.
Tailwind needs compiling into CSS before you can use it in the browser. This is where Mix comes in. The settings that statamic/statamic installs enables this out of the box.
Tailwind filesize is also huge out of the box (fnarr). So it needs purging when you are moving into production. I know how it feels. All the bits that are not used are discarded when you run npm run production. That's the mix.purgeCss({ enabled: true }); bit in your webpack.mix.js file from the previous post. You can run that command on your web server as part of your deployment process.
The main beauty of Tailwind, for me anyway, is that it doesn’t impose any design aesthetic onto your files. In fact it just makes it incredible easy to go from concept to production. And you can do that inside your Statamic installation.
My previous build process was generally:
.kit language to make the pages a bit interactive.Perch is not really suited to developing live as some of its content is cached: perch_content() and so you need to save entries via the control panel in order for them to be updated in the browser.
Statamic, out of the box, has caching turned off. So that makes it really easy to develop templates inside a ready-installed CMS. Is this faster or better? I am not sure yet. It's very easy to get sidetracked by not siloing these process steps. But it’s certainly more convenient.
Give it a go. It's really, really good. Go on. You will, you will, you will.
If you really don't like Tailwind then strip it out and use your usual way of dealing with process files. It is not essential to Statamic 3. Mardy get.
* Caligula was Gaius Julius Caesar Germanicus's nickname coz he stomped around Roman Army Camps in caligulae, or 'little boots'. It also fitted on the business cards more easily.
** Blah, blah, blah.