Why are "quotes" important in tailwind.css

Charlène — Thu, 05 Dec 2024 14:47:20 +0000

Today, I discovered something silly about quotes in tailwind.css

While working on our Adonis6.js project, we installed tailwind.css to work faster on our page's style.

But, while doing the indentation, we accidently took off the "quotes" on this line :

<div class=text-xl max-w-2xl mx-auto mt-6>

We didn't immediatly notice !

We took 20 mins searching why only the text-xl was working, until we noticed unlike our other lines, the "quotes" were missing. Then we wondered why the first attribute was still working.

But why are quotes mendatory in tailwind.css ?

Well, in our example :

<div class=text-xl max-w-2xl mx-auto mt-6>

The browser reads class=text-xl as valid, but then treats max-w-2xl, mx-auto, and mt-6 as separate invalid attributes, which won't work as intended.

When you use quotes :

<div class="text-xl max-w-2xl mx-auto mt-6">

The entire value is grouped together properly as the value of the class attribute.

So, that's why quotes in tailwind.css are important !

What is AdonisJS 6 context ? (ctx)

Charlène — Wed, 04 Dec 2024 16:22:36 +0000

This is a MD training

Today I learned the use of 'ctx' in an AdonisJS project.

While following a lesson on AdonisJS6, when making the routes we had to use the 'ctx' object.

But what is 'ctx' then ?

Well, it was use in that context :

route.get('/movies', async (ctx) => {
  return 'My awesome Movie!'
})

'ctx' stands for context, it's an object provided by the framework AdonisJS, it contains information about the incoming HTTP request and outgoing HTTP response. So, everything I need to handle the request and craft a response !

Why is ctx important ?

It makes working with requests and responses easier by putting all the important information in one place. Depending on the framework, the structure of ctx may vary, but it still will have the same job : to represent the context of the current HTTP request and response cycle.

So yes, this is what I learned today ! :)

DEV Community: Charlène