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?!

One of the pictures of the beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch. Picture taken by <a href="https://kirstenshultz.com/" target="_blank" rel="noreferrer noopener">Kirsten Schultz (Opens in a new tab)</a> and found on <a href="https://www.flickr.com/photos/m152/" target="_blank" rel="noreferrer noopener">metric555 (Opens in a new tab)</a> Flickr's account.

The beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch

Feels like forever since last time I wrote a snippet! In an effort to lower the ball, and genuinely so excited about what I'm about to share, let's try with something super simple!

Like every other nerd, I too imagine that if I were to get married, I'd love to have a game-themed wedding. That is, if I figure out anything to top up the beautiful Katamari-themed wedding that __Aidra Frazier__ and __Ernest Leitch__ organized themselves! I couldn't help but getting soooo excited that I also wanted to save somehow with me these beautiful pictures!

The <a href="https://www.flickr.com/photos/m152/3822948110/" target="_blank" rel="noreferrer noopener">Flickr album of the katamari-themed wedding (Opens in a new tab)</a> includes a lot of pictures of the whole day, everybody looks like they had a blast!

I'll share just one picture over here out of respect and I strongly invite everyone to check the album! Here you can see also the attention to details that came into decorating the wedding, such as the katamari-looking lanterns, all the katamari cousins' hats aaaand, last but not least... the beautiful katamari wedding cake topper that rolls away the (not-so-anymore)newly-wed couple!

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/3EHoPmDl1Bp9Lqrh1ZPec6/a1e6f0584615b75b92a003af350c9aae/3822948110_49de01a551_b.jpg" alt="The beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch" class="big-picture" />
	<figcaption>
		One of the pictures of the beautiful Katamari-themed wedding of Aidra Frazier and Ernest Leitch. Picture taken by <a href="https://kirstenshultz.com/" target="_blank" rel="noreferrer noopener">Kirsten Schultz (Opens in a new tab)</a> and found on <a href="https://www.flickr.com/photos/m152/" target="_blank" rel="noreferrer noopener">metric555 (Opens in a new tab)</a> Flickr's account.
	</figcaption>
</figure>

By the way, <a href="https://store.steampowered.com/news/app/848350/view/544491088003465427" target="_blank" rel="noreferrer noopener">Once Upon A Katamari (Opens in a new tab)</a> seems to be planned for release this October 24th!

oh-no.ooo

A beautiful Katamari-themed wedding

More Snippets

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

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