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

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!

UI/UX

Fonts

Ultimate Google Font Pairings and Combinations

Screenshot of the <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">main page of hypercolor.dev (Opens in a new tab)<a/>

hypercolor.dev - Tailwind CSS Gradients

<a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a> is a design tool that offers a collection of gradients and allows you to create your own. If you don't have any fantasy like me when it's about colors, this is a lovely site where you can get some great inspiration!

And yes, I used one of them (Ice) for this site as well. :)

And well, since I have some spare time at hand before hitting the bed, let me share a few.

### Cold Dawn

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1Sya7mkv1gBc2mUiEhxyjv/21a18d65cc5ee768075cb2a9c0ec6eb5/Hypercolor-ColdDawn.jpeg" alt="Cool Dawn, a gradient that goes from bottom left blue to top right yellowish. Despite the cold colors, it's still conveying some sense of warmth." />
	<figcaption>
 I call this Cool Down, because despite the cold tones, it still conveys a lot of warmth. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-tr from-indigo-900 via-sky-300 to-lime-200

{/* plain css */}
background: linear-gradient(to right top, rgb(49, 46, 129), rgb(125, 211, 252), rgb(217, 249, 157))
```

### Still Stone

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/7KuOQsr0Ks7pYQPqcnTmhb/5aedcb2e7bd5a85a9f44ef3d81ca9b69/Hypercolor-StillStone.jpeg" alt="Still Stone, a linear gradient that conveys the idea of a cold carving stone" />
	<figcaption>
 This one is Still Stone, because it reminds me of the marbles and stones used to carve those beautiful museum-worthy statues. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-[conic-gradient(at_bottom_left,_var(--tw-gradient-stops))] from-white via-stone-500 to-stone-600

{/* plain css */}
conic-gradient(at left bottom, rgb(255, 255, 255), rgb(120, 113, 108), rgb(87, 83, 78))
```

### Pastel Cotton Candy
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1kzfNlJA8siaSaDqabWi6x/1bff5c945228045638e85172034991df/HypercolorPastelCottonCandy.jpeg" alt="Pastel Cotton Candy, a cold and muted rainbow that reminds of different flavours of cotton candy" />
	<figcaption>
 Pastel Cotton Candy proposes a cold and muted rainbow that would serve great for background purposes. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.</a>
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-l from-cyan-300 via-amber-200 to-purple-300

{/* plain css */}
linear-gradient(to left, rgb(103, 232, 249), rgb(253, 230, 138), rgb(216, 180, 254))
```

### Last Dawn
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/aqIG3tp5GrKE1qTTeNPYG/8facf50e11b3642b4f1e6551d2dbc527/Hypercolor-LastDawn.jpeg" alt="Last Dawn, a seemingly warm dawn-inspired gradient that shows top black tones." />
	<figcaption>
 Last Dawn represents how a seemingly warm dawn can still feel overwhelming when you're looking at it with your heart full of worries, hence the black top, as if your vision is constantly unable to see the full picture. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-gradient-to-b from-neutral-700 via-orange-400 to-pink-500

{/* plain css */}
linear-gradient(rgb(64, 64, 64), rgb(251, 146, 60), rgb(236, 72, 153))

```

### Everyday
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/48QZPSGEUw4NDMF2piW8TW/555ef8157ae1683eb382b9f68c79e0a3/Hypercolor-Everyday.jpeg" alt="Everyday, a sharp conic gradient that represents both of the light and dark stages of a day" />
	<figcaption>
 Everyday has a strong conic gradient that divides in the top center, conveying to me personally the feeling of a full-cycle day. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```css
{/* Tailwind */}
bg-[conic-gradient(var(--tw-gradient-stops))] from-yellow-500 via-pink-900 to-blue-400

{/* plain css */}
conic-gradient(rgb(234, 179, 8), rgb(131, 24, 67), rgb(96, 165, 250))

```

... <a href="https://hypercolor.dev/generator" target="_blank" rel="noreferrer noopener">give the gradient generator a go by yourself (Opens in a new tab)</a>, and have some fun with it!

hypercolor.dev - Cool Tailwind Gradients

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>

oh-no.ooo

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

More Snippets

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

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