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.
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. CodeKit installs the latest version of Tailwind listed on npm.
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.
What about legacy Tailwind 2.x projects?
CodeKit supports old 2.x projects and will build them appropriately. New projects use Tailwind 3.x.
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 Autoprefixer will be automatically enabled.
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
By default, CodeKit automatically populates the content array with all the content entries from Project Settings > PurgeCSS, as long as the array is empty. If you put your own entries in the content array, CodeKit will no longer auto-populate it. It becomes your responsibility to list all the file types in your project that use CSS rules.
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.
Tailwind 2.x
PurgeCSS in the Config File
In a 2.x project, CodeKit honors all the settings you specify in tailwing.config.js 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.
Deploying a Tailwind 2.x 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 2.x classes you didn't use, which massively reduces the size of CSS files.