Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank" rel="noreferrer noopener">Tailwind Official Brand page (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/3d-abstract-background-with-paper-cut-flower-shape_18695224.htm" target="_blank" rel="noreferrer noopener"> 3d abstract background with paper cut flower shape (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/garrykillian" target="_blank" rel="noreferrer noopener">GarryKillian (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Tailwind

Chances are you are using VSCode, and chances are you're also using Tailwind in one of your projects. Chances are that at my first *chances are...* you went immediately *nuh-uh* and moved on (and if you're a NeoVim user I can't help you anyway, you're already doomed and lost in the recommended plugins someone chose for you and you're probably still figuring out half of them) but if I got your attention with the first two assumptions, then this post might be relevant for you!

One issue I've been having ever since using Tailwind with SCSS modules has been that VSCode goes absolutely ballistic marking every `@apply` as an unknown CSS rule, __as the editor assumes it's one `at-rule`__ from CSS. (If you are wondering what at-rules are, `@import` and `@media` might sound a bit more familiar :D)

`@apply` is a Tailwind directive that mimics in semantics a native CSS at-rule, and this one in the specific takes care of enabling Tailwind utility classes in a .scss file ... which by now we already now — *I know, we wouldn't be reading this article otherwise* — so jumping to the main thing, let me present you my favourite solution from <a href="https://byby.dev/at-rule-tailwind" target="_blank" rel="noreferrer noopener">the solutions list that this article from byby.dev (Opens in a new tab)</a> proposes.

Open the `.vscode` folder in your project, create a `tailwind_directives.json` file and add the following lines. I took the liberty of expanding from the article, which was talking specifically about the `@tailwind` directive, and take it as a chance to put <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer noopener">all the Tailwind specific directives I could find from Tailwind's documentation (Opens in a new tab)</a>:

```json
{
 "version": 1.0,
 "atDirectives": [
 {
 "name": "@tailwind",
 "description": "Use the @tailwind directive to insert Tailwind's `base`, `components`, `utilities`, and `screens` styles into your CSS."
 },
 {
 "name": "@apply",
 "description": "Use @apply to inline any existing utility classes into your own custom CSS."
 },
 {
 "name": "@screen",
 "description": "The screen function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS. Apparently deprecated in favour of @media?!"
 },
 {
 "name": "@layer",
 "description": "Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities."
 },
 {
 "name": "@config",
 "description": "Use the @config directive to specify which config file Tailwind should use when compiling that CSS file. Do not put @config before your @import statements."
 }
 ]
}
```

Then, head to `settings.json` and add these two lines:

```json
{
// ... other stuff
 "css.customData": [".vscode/tailwind_fix.json"],
 "scss.customData": [".vscode/tailwind_fix.json"]
}
```

And voilá! Done!

Now now, you might be tempted to follow the first solution proposed by the article, which simply tells VSCode to ignore every at-rule it cannot recognise:

```json
{
// ... other stuff
 "css.lint.unknownAtRules": "ignore"
 "scss.lint.unknownAtRules": "ignore"
}
```

But! __What about typos?__ We all make them, and I wouldn't trust myself writing things correctly any day :'D Better be more specific and let pass only the things we are aware of!

Custom

Prettier

Unknown at rule @apply... k thx bye!

Title and background gradient tweaked out with the DOM Inspector from <a href="https://declare-ai.org/" target="_blank" rel="noreferrer noopener">Declare-AI official website (Opens in a new tab)</a>

Declare AI

One of the latest interesting discussions on Slack at work has been about the value proposition of <a href="https://declare-ai.org" target="_blank" rel="noreferrer noopener">declare-ai.org (Opens in a new tab)</a>, a website created (*without any assistance from a Generative AI*) by <a href="https://naildrivin5.com/bio/index.html" target="_blank" rel="noreferrer noopener">David Bryant Copeland (Opens in a new tab)</a> that recognises the excitement around AI and wants to help people inform and be informed about its uses.

(bit off topic but, I am perplexed by the fact that David's own website doesn't have any comment about AI Content Declaration; perhaps they felt they had said all about the topic in the main website. Or perhaps they just wanted to make sure it is clear to people that their work has nothing to do with any sort of AI, maybe out of frustration for the new wave of low-quality/low-effort content blatantly created with AI and not wanting their work even remotely put on the same plate)🤷.

While I recommend checking the website (as I couldn't write any better about it than you could deduct from checking the actual site), the process it proposes is as follows:

```mermaid
graph TD
 A(Was Generative AI used in any way?) -->| Yes | B(Did Generative AI produce the entire work?)
 A -->| No | X(None)
 B -->| Yes | Y(Total)
 B -->| No | C(Did Generative AI contribute creatively?)
 C -->| Yes | D(Creative Assistance)
 C -->| No | E(Non-creative Assistance)
```

<blockquote class="text-sm">Not sure if the diagram can be read in an accessible way, therefore let me repeat it here (I will use a structure that proposes first the condition that end the flow). We start asking ourselves Was Generative AI used in any way?; if the answer is no, then the answer is None (as in no contribution from generative AI). If the answer is yes, we are prompted to another question Did Generative AI produce the entire work?; answering yes will land us on Total, as in total AI contribution; if we answer no, we are asked the last question Did Generative AI contribute creatively?; yes brings us to Creative Assistance and no will bring us to Non-creative Assistance.</blockquote>

It is up to your own judgement to determine if you used the AI in a creative way, but <a href="https://declare-ai.org/1.0.0/assess.html#creative-contribution" target="_blank" rel="noreferrer noopener">the website offers you a nice way to determine what could be considered creative assistance and what not (Opens in a new tab)</a>.

And once you go through this hierarchy, <a href="https://declare-ai.org/1.0.0/declare.html" target="_blank" rel="noreferrer noopener">you can make a public declaration about it (Opens in a new tab)</a>, in the best way that suits you and with the examples proposed. It allegedly also proposes to add this information in the form of meta tags... because why not?!

Now now, will I use it? *Not yet*! I would like to see it having more popularity; but what I like to do is to be open about the source of my work! And that's why __I gladly mention at least the most important prompts I ask about to ChatGPT__ at the end of each blogpost. On this website, my go-to way to use ChatGPT is to get inspiration on how to start discussing about a topic, steal good-sounding adjectives (as my English can only benefit from expanding my vocabulary), and in general to get over a writer's block that often prevents me from sharing more here, and learn more about something.

More than often, I read what ChatGPT proposes to me, and I'm immediately like nope, definitely not that! as it often goes with a very bland structure, lots of repetition, and unneeded conclusion paragraphs that give no particular value to the topic asked. But more than once, when I want to make sure I understand something about a particular topic, __it performs as a great teacher that never gets tired__, no matter how *stupider* my questions become. And it's really a teacher that I'd wish for everyone to have.

Many feel ashamed to mention they'd use any sort of generative AI and they'd prefer to keep it hidden. Instead of having a sense of appreciation for this technology, __a lot of people tend to judge negatively the skills of people using AI__, assuming that they're lazy, not knowledgeable, not actual professionals and that they'd not be able to succeed without such tool. I personally find unfair to question people's skills' worth based on how much they like to use AI, as I don't think my critical thinking is compromised any more than it'd be if I were to acquire information from a YouTube video, an online article, a book and so on. With that premise, I use ChatGPT as __one among many sources__ to acquire knowledge and understanding of a topic, and __it never is__ for me __the only source of information__.

Rather than hide its usage, __I absolutely love the idea to share with people how it helps me go past a lot of hurdles__. Before ChatGPT, I also have never been particularly shy about sharing where I've learned something, or what sources I have browsed to learn and/or do something. I really love to share with people because I would not be the person that I am today if people didn't share the things I've digested to this day.

We seem to forget that not too long ago, we were all assuming __developers were just copying stuff from StackOverflow__ and asking questions over there. So how does that exactly differ, in terms of originality and competence, from what ChatGPT offers us these days?

<hr/>

Have you ever wondered how many people make use of ChatGPT for writing their blog posts? What's your take on the topic? __Should people be more clear to which extend they use AI or would you just be happy to have valuable content in front of your eyes, regardless of how it came to be?__ Let me hear your opinion in the comments!

CoolWebsites

Content Creation

Inspiration

Development

declare-ai.org - ... so, who wrote that?!

When I started working with <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a> (mostly known as just Tailwind), I soon realized that there was a need to give a hierarchy to its utilitarian classes. While I had my structure, it seems that peeps at Tailwind have heard this feedback a few times and apparently last year they came up with their <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">automatic class sorting plugin for Prettier (Opens in a new tab)</a>.

What you would have had before as

```html
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
```

will become

```html
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>
```

and that's simply great! You won't have to spend time reorganizing classes, as if you have Prettier set up `onSave` you'll have the classes' sorting right at your fingertips!

## Hierarchy of the sorting

Classes in the `base` layer will be sorted first, followed by classes in the `components` layer, and then finally classes in the `utilities` layer.

From their documentation
<blockquote>
 The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together.

 <div class="text-right">— <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier
 (Opens in a new tab)</a> by <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a></div>
</blockquote>

To understand better how the sorting happens and if you need to keep something in mind, I recommend checking <a href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank" rel="noreferrer noopener">the GitHub page of Tailwind Automatic Class Sorting with Prettier (Opens in a new tab)</a> together with the official page <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier (Opens in a new tab)</a>.

The article shows the names of <a href="https://twitter.com/reinink" target="_blank" rel="noreferrer noopener">Jonathan Reinink (Opens in a new tab)</a> and <a href="https://twitter.com/adamwathan" target="_blank" rel="noreferrer noopener">Adam Wathan (Opens in a new tab)</a>, so thank you peeps!

Tailwind Automatic Class Sorting with Prettier

Screenshot of the website <a href="https://isthisarabic.com/" target="_blank" rel="noreferrer noopener">isthisarabic.com (Opens in a new tab)</a>, developed by <a href="https://ramiismail.com/" target="_blank" rel="noreferrer noopener">Rami Ismail (Opens in a new tab)</a>

Isthisarabic

<a href="https://isthisarabic.com" target="_blank" rel="noreferrer noopener">isthisarabic.com (Opens in a new tab)</a> is the ultimate resort of <a href="https://ramiismail.com" target="_blank" rel="noreferrer noopener">Rami Ismail (Opens in a new tab)</a> to educate people about the overall appearance of Arabic, and how media and companies do not respect the part of the population they so claim to include.

There are a lot of instances where this language presents a challenge (right-to-left layouts online, mishaps while copying and pasting texts, encoding etc.), and the additional challenge of companies disregarding proper translations does not help the world to learn more about this language and the cultures behind it.

Thank you for not giving up, Rami! I'll do my best to do my part in this! :D

P.S: He also has a great crash course on YouTube!

<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/X1ynZm1wI18" data-embed-title="Rami Ismail, Vlambeer - XOXO Festival (2015)" data-embed-url="https://www.youtube.com/watch?v=X1ynZm1wI18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Accessibility

UI/UX

isthisarabic.com - Is this عربي? Let's figure it out!

Screenshot of a section of the page <a href="https://heyreliable.com/ultimate-google-font-pairings/" target="_blank" rel="noreferrer noopener">The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art) (Opens in a new tab)<a/> curated by Lou Levit through <a href="https://heyreliable.com/" target="_blank" rel="noreferrer noopener">Reliable (Opens in a new tab)<a/>

Font Pairing example by Hey Reliable

[The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art)](https://heyreliable.com/ultimate-google-font-pairings/) from Lou Levit through [Reliable](https://heyreliable.com/ "Reliable website") is one of those delightful ways to spend time in front of your screen and come out with fresh ideas on how to style your site.

![Font Pairing example from HeyReliable](//images.ctfassets.net/hzu7wkrk7tly/6zIqzUWDNKINzJmP3hedpU/21b444d3998b182de9f8e78d0304e737/Screenshot_2023-03-04_at_23.58.33.png)

Browse through 50 font pairings (by style or mood) and find the combinations that speak to you the most - and yes, that's completely free!

oh-no.ooo

Ultimate Google Font Pairings and Combinations

More Snippets

Unknown at rule @apply... k thx bye!

declare-ai.org - ... so, who wrote that?!