https://github.com/ge3224/tailkick
A WordPress theme that utilizes Tailwind CSS.
https://github.com/ge3224/tailkick
css tailwind tailwindcss wordpress wordpress-theme
Last synced: 3 months ago
JSON representation
A WordPress theme that utilizes Tailwind CSS.
- Host: GitHub
- URL: https://github.com/ge3224/tailkick
- Owner: ge3224
- License: gpl-2.0
- Created: 2022-11-17T14:14:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-24T01:57:14.000Z (about 3 years ago)
- Last Synced: 2023-12-18T04:20:38.082Z (over 2 years ago)
- Topics: css, tailwind, tailwindcss, wordpress, wordpress-theme
- Language: PHP
- Homepage:
- Size: 51.8 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
A WordPress Theme Utilizing Tailwind CSS
[](https://github.com/ge3224/tailkick/blob/main/LICENSE.md)
[](https://github.com/ge3224/tailkick/releases)
*TailKick* offers WordPress site owners a fresh look and theme builders a surprisingly pleasant developer experience.
WordPress users can switch their websites to the *TailKick* theme and make customizations in the [usual way](#gs-site-owners).
For folks interested in working with *TailKick*'s codebase, those who may create a new theme based on *TailKick* or those interested in [contributing to this project](#contributing) :smile:, I recommend the [Tailwind CSS](#more-about-tailwind) framework and its challenge of traditional CSS best practices.
#### The traditional approach: write custom CSS for a custom design
```html
Download
.nav__btn--teal-3 {
margin-top: 0.75rem;
padding: 0.5rem 1rem;
font-weight: 700;
background-color: rgb(94,234,212);
border: 1px solid rgb(0,0,0);
box-shadow: 5px 5px 0 0 rgba(0,0,0,0.20);
}
```
#### The Tailwind approach: create a custom design without writing additional CSS
```html
Download
```
[More about Tailwind](#more-about-tailwind)
#### Use the Default TailKick Theme on a WordPress Site
- Download a `tailkick.zip` file found on the [Releases](https://github.com/ge3224/tailkick/releases/) page.
- Upload the `tailkick.zip` file through your WordPress dashboard. (See [WP help docs](https://wordpress.org/support/article/appearance-themes-screen/#using-the-upload-method).)
- The theme will appear in the dashboard. Click the **Activate** link to make TailKick the Current Theme.
Without editing template files, CSS, or PHP, you can personalize *TailKick*'s look using your unique content and WordPress's Customize API (Customizer).
#### Develop a Theme Based on TailKick with Tailwind CSS
```bash
git clone https://github.com/ge3224/tailkick
cd tailkick
npm install
npm run start:css
```
Tailwind CSS describes itself as a “utility-first CSS framework.” It is an extensive library of class selectors mapped to carefully constrained rulesets called “primitive utilities.” You style HTML elements by adding and removing Tailwind classes in your markup. Tailwind users often say it increases their productivity and is easier to manage as their projects grow in complexity. The framework addresses well-known pain points associated with CSS development:
- No more need to come up with silly class names for new styles (e.g. `card-4__subttl--lightorange-3`)
- An end to sprawling additions in the CSS as a website grows with new features and designs
- Dead code is eliminated; refactoring feels safer
The Tailwind framework is a descendant of Atomic CSS, which achieved notoriety with Thierry Koblentz's 2013 essay [*Challenging CSS Best Practices*](https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/).
Read more about [Tailwind's philosophy](https://tailwindcss.com/docs/utility-first) on its website. (See also [The Evolution of Scalable CSS](https://frontendmastery.com/posts/the-evolution-of-scalable-css/).)
1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
- [Theme Handbook](https://developer.wordpress.org/themes/)
- [Tailwindcss Utility-first Fundamentals](https://tailwindcss.com/docs/utility-first)
- [The Evolution of Scalable CSS](https://frontendmastery.com/posts/the-evolution-of-scalable-css/)
## TODO
- [x] Add a favicon
- [x] Use PostCSS minifier
- [x] Test responsive layouts
- [ ] Theme Unit Test
- [ ] Test legacy widgets
- [ ] Check accessibility
- [ ] Build more customizer options for home hero (text placement)
- [ ] Accommodate block theme development