https://github.com/andy-set-studio/cube-with-tailwind
https://github.com/andy-set-studio/cube-with-tailwind
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/andy-set-studio/cube-with-tailwind
- Owner: Andy-set-studio
- Created: 2022-01-26T11:10:12.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-20T01:14:00.000Z (over 2 years ago)
- Last Synced: 2025-01-11T07:50:37.926Z (4 months ago)
- Language: CSS
- Size: 70.3 KB
- Stars: 91
- Watchers: 3
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CUBE CSS with Tailwind CSS
⚠️ **THIS IS VERY MUCH A PROTOTYPE AND LIKELY BROKEN** ⚠️
👀 **DEMO: ** 👀
📝 **MORE INFO [I wrote up about this whole thing here](https://piccalil.li/blog/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/)**
An example of how you can use [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) as the U (utilities) in
[CUBE CSS](https://cube.fyi/). It also uses the following:
1. [Every Layout](https://every-layout.dev/) layouts as compositional layouts (the C in CUBE CSS)
2. [Utopia](https://utopia.fyi/) for fluid type and spacing scales
3. [Post CSS](https://postcss.org/) to bundle up CSS files
## Why?
I work with clients that like to use Tailwind and I, as part of the
consultancy work I do, try to encourage them down the path of a CSS
methodology, rather than leaning all-in on a CSS framework.
Tailwind is _fantastic_ at generating utility classes with an
easy-to-understand config file, but I find it very limiting and rigid as the
entire CSS codebase, so this project uses it how I would ideally use it:
purely as the utility generator.
Consider this project diplomacy.
## Getting started
1. Run `npm install`
2. Run `npm start` to spin up a little local server and watch for CSS changes
3. Run `npm build` to compress CSS etc
## Contributing
No thanks, but if you see something fundamentally wrong (not just your
opinions, thanks), then let me know in the issues!