{"id":13759053,"url":"https://github.com/joshuaiz/air","last_synced_at":"2025-10-31T09:31:04.410Z","repository":{"id":47143400,"uuid":"220751274","full_name":"joshuaiz/air","owner":"joshuaiz","description":"A hyper-minimal WordPress starter theme for developers built with Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2021-09-12T00:57:22.000Z","size":10522,"stargazers_count":51,"open_issues_count":1,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-29T08:33:52.161Z","etag":null,"topics":["minimal","starter-template","tailwind-css","tailwindcss","theme-development","wordpress","wordpress-boilerplate","wordpress-development","wordpress-starter-theme","wordpress-theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshuaiz.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.html","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-10T06:33:13.000Z","updated_at":"2024-12-18T06:19:38.000Z","dependencies_parsed_at":"2022-09-04T19:01:11.013Z","dependency_job_id":null,"html_url":"https://github.com/joshuaiz/air","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fair","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fair/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fair/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaiz%2Fair/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshuaiz","download_url":"https://codeload.github.com/joshuaiz/air/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238821456,"owners_count":19536223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["minimal","starter-template","tailwind-css","tailwindcss","theme-development","wordpress","wordpress-boilerplate","wordpress-development","wordpress-starter-theme","wordpress-theme"],"created_at":"2024-08-03T13:00:44.683Z","updated_at":"2025-10-31T09:30:57.651Z","avatar_url":"https://github.com/joshuaiz.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Air by [studio.bio](https://studio.bio/)\n\n[![License](https://img.shields.io/github/license/joshuaiz/air)](https://img.shields.io/github/license/joshuaiz/air)\n[![Github Last Commit](https://img.shields.io/github/last-commit/joshuaiz/air)]()\n[![GitHub issues](https://img.shields.io/github/issues/joshuaiz/air)]()\n[![GitHub forks](https://img.shields.io/github/forks/joshuaiz/air)](https://github.com/joshuaiz/plate/network)\n[![GitHub stars](https://img.shields.io/github/stars/joshuaiz/air)](https://github.com/joshuaiz/air/stargazers)\n[![Twitter](https://img.shields.io/twitter/follow/joshuaiz)](https://twitter.com/joshuaiz)\n\n## A hyper-minimal WordPress starter theme for developers built with Tailwind CSS.\n\n### Quickstart\n1. Download or clone into `/wp-content/themes/`\n2. Run `npm install` to install the dependencies.\n3. Change the name of the theme directory from `air` to whatever you want and also change the comment header in `style.css` to your desired theme name.\n4. Activate the theme in the WordPress admin.\n5. ❤️ Love.\n\n### Developing with Air\nFrom the theme's directory, run `npm run dev` or even better `npm run watch` which includes browser reloading.\n\nAs you update your files, Air will either hot reload or rebuild if new `.css` files are required.\n\nVisit `https://localhost:3000` to view your local site.\n\n### Deploying\nRun `npm run build` to generate a production build which uses `purgecss` to remove any styles from Tailwind CSS that you aren't using in your theme keeping it as lean as possible.\n\nThen upload your production build to your web server or deploy from GitHub. That's it!\n\n### Hot Reloading/Browser Refreshing\nWhile `laravel-mix` has hot reloading built-in, it is a known issue that it doesn't work with Tailwind CSS so we've added [Browsersync](https://www.browsersync.io) as a plugin that will reload the local development browser automagically when any PHP files are updated.\n\nTo get it working, just change the `proxy` option in `webpack.mix.js` to your local development domain:\n\n```javascript\n.webpackConfig({\n        plugins: [\n            new BrowserSyncPlugin({\n                files: \"**/*.php\",\n                proxy: \"https://yourdomain.local\",\n                browser: \"google chrome\",\n                https: true,\n                open: false\n            })\n        ]\n    });\n```\nThe browser will automatically refresh upon a new local build of CSS files when running `npm run watch`.\n\n### Air + Tailwind CSS\nAir uses [Tailwind CSS](https://tailwindcss.com) which is a **utility-first** css framework and a whole new way to think about adding styles to your project.\n\nInstead of creating markup, coming up with class names and then adding `css` styles to those classes in your stylesheets, Tailwind CSS's low-level utility classes are added _directly to your HTML_ to create your designs.\n\nThink of Tailwind CSS like an alphabet that — when combined in beautiful ways — can create rich and complex designs, just like we do with the letters of our English alphabet when combined to form language.\n\nOnce you learn Tailwind's classes \"alphabet\" and how to use it, the possibilities are endless. Yet, by using pre-defined styles as building blocks, you aren't creating everything from scratch.\n\nStill, if you need to do something custom, you can always write your own `css` just as before. The beauty of Tailwind CSS though is that you will be writing way less `css`. \n\n![](https://studio.bio/images/tailwind1.png)\n\nThe example above is from the Tailwind CSS website and shows a sample component created without any added `css` styles — everything is done in the HTML using Tailwind's classes. This example even sets responsive breakpoints and their respective styles right in the HTML. \n\nSee this on the [tailwindcss.com site](https://tailwindcss.com) site \u0026rarr;.\n\n### How does it work?\nTailwind CSS requires a _build process_ so Air is set up a little differently than most other WordPress themes. If you've used Sass/SCSS with a preprocessor then the process is similar, with some differences that we'll explain in detail.\n\nBut don't worry — even if you never used a preprocessor, Webpack or Grunt or Gulp or have no idea what a `package.json` file is or does, Air makes it easy.\n\nThe first thing you might notice is that there are a few files in the theme's root folder that may look unfamiliar. Let's take a look at these and explain what they do.\n\n#### `webpack.mix.js`\nThis file imports `mix` which is a very cool utility that allows us to use JavaScript libraries and build tools in our WordPress theme (or any kind of project). \n\nThe magic happens here:\n```javascript\nmix\n    .postCss(\"library/css/theme-style.css\", \"library/css/style.css\")\n    .options({\n        from: \"undefined\",\n        postCss: [\n            require(\"postcss-import\"),\n            require(\"tailwindcss\"),\n            require(\"postcss-nested\"),\n            require(\"autoprefixer\")\n        ],\n        // more stuffs\n```\nTailwind CSS is a plugin for`PostCSS` and that's not particularly important other than the fact that `mix` supports `PostCSS` out-of-the-box. So all we have to do is `require` our `PostCSS` plugins (including Tailwind) and we are good to go.\n\nHere we're telling `mix` to use `PostCSS` to use the `theme-style.css` file to build our `style.css` file using the options specified.\n\nYou don't need to edit this file at all but you *can* and add your own `PostCSS` options/plugins or even other JavaScript libraries or plugins (outside of CSS) and extend `mix` as you see fit! \n\n#### `tailwind.config.js`\nThis file is used to extend Tailwind's defaults as well as add custom defaults for a theme. We've added some default classes and colors for Air but feel free to delete what's there or add your own.\n\nSee more info on [customizing Tailwind's config](https://tailwindcss.com/docs/configuration).\n\n### Build Process\nThe Tailwind/PostCSS build process is a bit slower than using `.scss` and preprocessors because whatever classes you use in your `.css` stylesheets, Tailwind has to scope through all of it's styles and apply them at build time.\n\nFor this reason, we've commented out adding the `editor` and `block` stylesheets (for the content and Gutenberg editors) to the main build as they add considerable time to the process. Uncomment these when you've made changes and need to add them to the build but then comment them out for your main development workflow.\n\nStill, as you will be adding most of your styles to the markup in `.php` files, you won't need to rebuild the stylesheets as often as you might think.\n\n### What about SCSS?\nOur other WordPress starter theme [Plate](https://github.com/joshuaiz/plate) uses modular `.scss` files and media queries so definitely look at that if you want to use `.scss`.\n\nWe love `.scss` however with Air and Tailwind CSS, you don't need it! In our `webpack.mix.js` file above, we are using `PostCSS` plugins that support imports, nesting, and autoprefixing just like SCSS. \n\nYou weren't really using lots of complex Sass mixins, were you? (If so, you still can use `.scss` and preprocessors with Tailwind...see the [docs](https://tailwindcss.com/docs/using-with-preprocessors).)\n\nHere's the key concept:\n\n\u003e **Most of your styles will be added as classes directly to the theme's HTML**\n\nAs a result, we're using regular ol' `.css` files but you can import files and nest selectors just like Sass/SCSS and don't need to worry about browser prefixing — that is all handled at the build step.\n\nYet really you will be writing less CSS which will speed up your development immensely.\n\n### Advanced Options\nComing soon...\n\n### Try Air\nIf you're still skeptical, just give Air + Tailwind CSS a try. The only way to really see the benefits of Tailwind CSS is to dive in and use it. I was skeptical too — but I was hooked after 15 minutes and never looked back.\n\nGranted, Air (and Tailwind CSS) won't be the right fit for every project but at [studio.bio](https://studio.bio) we wanted another option for a starter theme for non-headless projects and we love working with Tailwind CSS. Enter Air.\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuaiz%2Fair","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshuaiz%2Fair","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuaiz%2Fair/lists"}