What's Tailwind?
Tailwind is a utility-first CSS framework. Instead of writing your own CSS, you stay in your HTML and simply apply some of the thousands of CSS classes Tailwind contains. Then, you run PurgeCSS to delete the ones you didn't use.
It sounds nuts, but you'll be amazed how much faster and, most importantly, maintainable it is.
Using Tailwind
- Go to File > New TailwindCSS Project.
- Choose a folder for the new project.
- CodeKit downloads the latest version of Tailwind, sets everything up, then builds the project.
- Click the Preview Button and get to work.
Is this some custom version of Tailwind?
No. You'd get the same result if you installed Tailwind any other way.
Now what?
See the official Tailwind documentation for where to go from here.
Can I use Sass in my Tailwind project?
No. CodeKit supports only standard CSS in Tailwind projects because that's what Tailwind recommends.
A Note About Project Settings
When you create a new Tailwind project, some settings start with specific values regardless of what your Defaults For New Projects are. This is because Tailwind needs these settings to work best.
For example: the project will be set to use a Build Folder and output paths for all files will be set accordingly. Some tools such as PurgeCSS will be set to run only in the Production build environment, the build environment itself will default to Development, etc.
Tailwind Config Files
CodeKit automatically creates tailwind.config.js and postcss.config.js files for your project. You'll find helpful comments in both, but here's the gist:
Tailwind
CodeKit honors all the settings you specify in this file EXCEPT those related to PurgeCSS. Any purge options other than "preserveHTMLElements" and "layers" (which are specific to Tailwind) will be overwritten with the values of PurgeCSS options as specified in Project Settings > PurgeCSS. Use the UI to change those values.
PostCSS
In general, you should not need to customize this file. If you want to run PostCSS tools that aren't built into CodeKit, here's how to do that.
Automatic Compiling
Anytime you save one of these config files, all CSS files in your project will re-compile automatically to capture the changes.
Deploying a Tailwind Site
When you're done building your site, be sure to change the Build Environment to "Production" in Project Settings > General. Then, rebuild the project.
This will run PurgeCSS to remove all the Tailwind classes you didn't use, which massively reduces the size of CSS files.