Features Videos Help About Updates
Menu Buy Now

TailwindCSS

First Steps:
Getting Started
Live-Reload Browsers
Browser Sync
Set Language Options
Set Output Paths & Action
Second Steps:
Defaults For New Projects
Build Your Project
Set Target Browsers
Stuff To Know:
CodeKit + Git
Troubleshooting
License Recovery
PostCSS Tools:
Autoprefixer
PurgeCSS
CSSO
Custom PostCSS Plugins
Other Tools:
npm
Babel โ€” (JS Transpiler)
Terser โ€” (JS Minifier)
Rollup โ€” (JS Bundler)
Cache-Buster
HTML-Minifier
Libsass
Bless
Languages:
Sass
Less
Stylus
JavaScript
CoffeeScript
TypeScript
Pug
Haml
Slim
Kit
Markdown
JSON
Image Optimizers:
WebP
PNG
JPEG
SVG
GIF
Frameworks:
CodeKit Frameworks
TailwindCSS
Bourbon
Bitters
Zurb Foundation
Susy
Nib
Jeet
Compass
Syntax Checkers:
ESLint
JSHint
JSLint
CoffeeLint
Advanced:
Hooks
Environment Variables
Adding Custom Languages
Team Workflows
Scripting CodeKit
Editor Plugins:
Nova
Atom
Sublime Text
Coda 2
More
Read-Only Mode
Upgrading From 2.0
FAQ

What's Tailwind?

The TailwindCSS logo

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

  1. Go to File > New TailwindCSS Project.
  2. Choose a folder for the new project.
  3. CodeKit downloads the latest version of Tailwind, sets everything up, then builds the project.
  4. 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

A screenshot of the Build Environment Project Setting in the CodeKit Window

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.


Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy