chore(blog): add post

content/posts/how-i-style-my-website.en.mdx

@@ -0,0 +1,97 @@
+---
+title: Why Use Tailwind CSS Instead of Traditional CSS?
+description: Tailwind CSS is a CSS framework that enables the rapid and easy creation of websites. It is highly beneficial for developers who want to build websites without having to write traditional CSS code. But is it worth using?
+date: 2023-11-20
+authors: github:AugustinMauroy
+thumbnail: '/images/blog/blog thumbnail tailwind.svg'
+---
+
+## What is Tailwind CSS?
+
+Tailwind CSS is an innovative CSS framework focused on using utility classes directly integrated into HTML. This utility-first approach simplifies development by providing pre-designed classes for various styles, allowing developers to quickly create websites while maintaining clear and readable code.
+
+> Tailwind CSS was created in 2017 by developer Adam Wathan to offer an innovative approach to interface styling. Focused on simplicity and flexibility, the framework uses utility classes directly in HTML code. Its rapid adoption is attributed to its opinionless design, allowing developers to easily customize while promoting fast development.
+
+## Reminder on CSS
+
+CSS is a style language used to define the appearance and layout of web pages. It is used to define colors, fonts, layouts, and other aspects of a website's presentation. CSS is a style language used to define the appearance and layout of web pages. It is used to define colors, fonts, layouts, and other aspects of a website's presentation.
+
+## Is Tailwind CSS Better?
+
+To compare Tailwind CSS to traditional CSS, let's take a concrete example. We will create a container with a title and a paragraph.
+
+### With Traditional CSS
+
+```css
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+### With Tailwind CSS
+
+```html
+<div class="flex flex-col items-center justify-center"></div>
+```
+
+**or with the `@apply` directive**
+
+```css
+.container {
+ @apply flex
+ flex-col
+ items-center
+ justify-center;
+}
+```
+
+## Why is Tailwind CSS More "Safe"?
+
+Tailwind provides classes for spacing (margins and paddings), avoiding irregular spacing between elements.
+
+## My Personal Opinion
+
+In my opinion, Tailwind is beneficial in front-end development. Tailwind allows me to have color palettes at my fingertips and is designed to pay attention to contrast ratio. Moreover, the spacing utilities are very useful and save time while ensuring consistency in spacing.
+
+At first, I disliked Tailwind because using it in `class` felt like spaghetti code. However, I later realized that I could use the `@apply` directive to create custom classes, resulting in cleaner code.
+
+## How Do I Use Tailwind CSS?
+
+> My stack: for web development, I use [React](https://react.dev) and [Next.js](https://nextjs.org/), and now Tailwind and CSS modules.
+
+As mentioned earlier, I use CSS modules to keep my code cleaner and more readable.
+
+Here's an example of a React component (you can use your preferred library).
+
+```tsx
+import styles from './index.module.css';
+import type { FC, PropsWithChildren } from 'react';
+
+const Container: FC<PropsWithChildren> = ({ children }) => (
+ <div className={styles.container}>{children}</div>
+);
+```
+
+**`index.module.css`**
+
+```css
+.container {
+ @apply flex
+ flex-col
+ items-center
+ justify-center
+ rounded-lg
+ border
+ border-gray-300
+ p-4
+ shadow-lg;
+}
+```
+
+## Useful Links
+
+- [Tailwind CSS](https://tailwindcss.com/)
+- [CSS MDN Documentation](https://developer.mozilla.org/en/docs/Web/CSS)

content/posts/how-i-style-my-website.fr.mdx

@@ -0,0 +1,99 @@
+---
+title: Pourquoi utiliser Tailwind CSS au lieux du css classique ?
+description: Tailwind CSS est un framework CSS qui permet de créer des sites web rapidement et facilement. Il est très utile pour les développeurs qui veulent créer des sites web sans avoir à écrire du code CSS. Mais est-ce bénéfique de l'utiliser ?
+date: 2023-11-20
+authors: github:AugustinMauroy
+thumbnail: '/images/blog/blog thumbnail tailwind.svg'
+---
+
+## Tailwind CSS, c'est quoi ?
+
+Tailwind CSS, c'est un framework CSS novateur axé sur l'utilisation de classes directement intégrées dans le HTML. Cette approche utilitaire simplifie le développement en offrant des classes préconçues pour divers styles, permettant aux développeurs de créer rapidement des sites web tout en maintenant un code clair et lisible.
+
+> Tailwind CSS a été créé en 2017 par le développeur Adam Wathan pour offrir une approche novatrice du stylage d'interfaces. Axé sur la simplicité et la flexibilité, le framework utilise des classes utilitaires directement dans le code HTML. Son adoption rapide est attribuable à sa conception sans opinion, permettant aux développeurs de personnaliser facilement tout en favorisant la rapidité de développement.
+
+## Rappel sur le CSS
+
+Le CSS est un langage de style utilisé pour définir l'apparence et la mise en page des pages web. Il est utilisé pour définir les couleurs, les polices, les dispositions et d'autres aspects de la présentation d'un site web. Le CSS est un langage de style utilisé pour définir l'apparence et la mise en page des pages web. Il est utilisé pour définir les couleurs, les polices, les dispositions et d'autres aspects de la présentation d'un site web.
+
+## Tailwind CSS, c'est mieux ?
+
+Pour comparer Tailwind CSS au CSS classique, nous allons prendre un exemple concret. Nous allons créer un container avec un titre et un paragraphe.
+
+### Avec CSS classique
+
+```css
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+### Avec Tailwind CSS
+
+```html
+<div class="flex flex-col items-center justify-center"></div>
+```
+
+**ou avec la directive `@apply`**
+
+```css
+.container {
+ @apply flex
+ flex-col
+ items-center
+ justify-center;
+}
+```
+
+## Pourquoi Tailwind CSS est-il plus "safe" ?
+
+Tailwind fournit des classes pour le spacing (marges et paddings) ce qui permet d'éviter l'irrégularité des espacements entre les éléments.
+
+## Mon avis personnel
+
+Selon moi Tailwind est bénéfique dans le développement front-end. Tailwind me peremt d'avoir des pallettes de couleurs à porté de mains et pensé pour faire attention au contraste-ratio
+De plus les spacing sont très utiles et permettent de gagner du temps et avoir de la régularité dans les espacements.
+
+Au déubut j'eus haï tailwind car utiliser en `class` on se retrouve en spagétis code.
+Puis dans un second temps je me suis souvenu que l'on pouvait utiliser la directive `@apply` pour créer des classes personnalisées et donc avoir un code plus propre.
+
+## Comment utilis-je Tailwind CSS ?
+
+> Ma stack: pour faire du web, j'utilise [react](htttps://react.dev) et [next.js](https://nextjs.org/) et maintenant tailwind et les module CSS.
+
+Comme dit juste au dessus j'utilise les modules CSS pour avoir un code plus propre et plus lisible.
+
+Donc voici l'example d'un composant react (_vous pouvez utilise votre librairies pérférer_).
+
+```tsx
+import styles from './index.module.css';
+import type { FC, PropsWithChildren } from 'react';
+
+const Container: FC<PropsWithChildren> = ({ children }) => (
+ <div className={styles.container}>{children}</div>
+);
+```
+
+**`index.module.css`**
+
+```css
+.container {
+ @apply flex
+ flex-col
+ items-center
+ justify-center
+ rounded-lg
+ border
+ border-gray-300
+ p-4
+ shadow-lg;
+}
+```
+
+## Lien utiles
+
+- [Tailwind CSS](https://tailwindcss.com/)
+- [CSS MDN DOC](https://developer.mozilla.org/fr/docs/Web/CSS)