Comments (2)
Sorry for taking a while to get back to you.
Thank you for this incredibly in-depth reply. I've read it over a few times and I think I finally get it on some level.
I kinda still miss prototyping with the default Tailwind classes, but I can definitely see the benefit of the route you've opted for.
Anything that has come after flexbox is "new" to me so there's a lot of stuff that feels like magic and I can't really grok it all and I keep discovering a lot of cool solutions left and right.
You can close this issue, I thought I had an issue with using the Tailwind styles but really, I just didn't get how you do CSS :)
from eleventy-excellent.
Hi, sure. Always wanted to write something for that. I'll add a post the starter, but for now:
We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens. If you have a look at the tailwind.config.js
, you can see how that is done. For example, we are deactivating Tailwinds default reset with the Preflight plugin.
We are hooking into the components layer, to make Tailwind output classes based on our design tokens, instead of their default design system. That is, you are able to use mt-xs-s
instead of a class like mt-20
for example. Same goes for colors, depending on the names you defined in your colors.json
, you get custom classes like text-primary
. These use the usual Tailwind prefixes.
Example:
{
"name": "my custom color name",
"value": "pink"
},
Yo get a custom property mapped to the color name pink
: --color-my-custom-color-name: pink
and the classes bg-my-custom-color-name
as well as text-my-custom-color-name
.
Consider that we limit those utilities in the theme section:
backgroundColor: ({theme}) => theme('colors'),
textColor: ({theme}) => theme('colors'),
margin: ({theme}) => ({
auto: 'auto',
...theme('spacing')
}),
padding: ({theme}) => theme('spacing')
If you want to add the generation for border-color classes for example, you'd have to add that right there:
borderColor: ({theme}) => theme('colors')
Also. you do have something like md:text-right
available because we define the screens on line 26:
screens: {
md: '50em',
lg: '80em'
},`
Additionally, you get custom properties based on the naming of your design token files, the prefix is defined in line 77:
const groups = [
{key: 'colors', prefix: 'color'},
{key: 'spacing', prefix: 'space'},
{key: 'fontSize', prefix: 'size'},
{key: 'fontFamily', prefix: 'font'}
];
In your dev tools you can see all the generated custom properties + your custom ones from css/global/variables.css
.
They are generated by default.
You can also create custom utility classes on line 104:
const customUtilities = [
{key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
{key: 'colors', prefix: 'spot-color', property: '--spot-color'}
];
For example: {key: 'spacing', prefix: 'gutter', property: '--gutter'}
If you install the Tailwind CSS IntelliSense addon, you can actually see the classes available to you, including the color preview.
If you want to read some thoughts that lead Andy Bell to come up with that approach: https://andy-bell.co.uk/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/
from eleventy-excellent.
Related Issues (20)
- Suggestion: Add github public template button HOT 1
- Draft Posts HOT 5
- Remove Minification HOT 2
- Date language HOT 5
- Fantastic (EXCELLENT!) template! Looking for TAGS support for post HOT 3
- How to link to full size image? HOT 4
- sitemap.xml generated urls from src/assets css and js HOT 1
- Plugin Warning HOT 3
- imagePlaceholder fallback doesn't work HOT 1
- OG images don't work with webfonts HOT 2
- Broken OG Images HOT 1
- Middle-click usability issue with clickable cards HOT 6
- Post Tags on Blog Cards HOT 2
- Dark theme custom colors don't render. HOT 2
- How do you update a template? HOT 2
- Partial -> Meta-info.njk (Description and Personal.Platforms Corrections) HOT 1
- adding a license? HOT 2
- Incorrect URL on the about page HOT 2
- On the issue of dependencies vs devDependencies HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy-excellent.