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 Tailwind 4.x and 3.x. Older 2.x projects are no longer compatible; update them to Tailwind 4.
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 disabled because Tailwind handles prefixing for you.
Config Files
CodeKit automatically creates a postcss.config.mjs file for your project. In general, you don't need to customize this file but if you want to run custom PostCSS tools that aren't built into CodeKit, here's how to do that. Anytime you change this file, CodeKit will recompile all affected stylesheets.