Merge branch 'release'

This commit is contained in:
Filip Sodić 2023-07-12 17:10:58 +02:00
commit d554506bc8
39 changed files with 2408 additions and 11 deletions

View File

@ -62,7 +62,7 @@ The party starts at **9.30 am EDT / 3.30 pm CET** - sign up [here](https://disco
As per usual, there will be memes, swag and lots of interesting dev discussions!
## Monday: The future is now 🛸
## Auto CRUD | Monday: The future is now 🛸
<ImgWithCaption
alt="The future is now"
@ -75,9 +75,11 @@ That's what we are coming after - is it possible to avoid writing (or generating
**When**: Monday, June 26 2023
**Read more about it**: coming soon
**Read more about it**:
- [Twitter thread introing Auto CRUD](https://twitter.com/WaspLang/status/1673376102792806402)
- [Docs Guide to Auto CRUD](/docs/guides/crud)
## Tuesday: Be real, time 🔌⏱
## WebSocket Support | Tuesday: Be real, time 🔌⏱
<ImgWithCaption
alt="Realtime"
@ -90,7 +92,9 @@ Another situation where you might want to keep things real is when chatting to s
**When**: Tuesday, June 27 2023
**Read more about it**: coming soon
**Read more about it**:
- [Intro Twitter thread](https://twitter.com/WaspLang/status/1673742264873500673)
- [Docs Guide](/docs/guides/websockets)
## Wednesday: Community Day 🤗
@ -104,9 +108,9 @@ Community is at the centre of Wasp, and Wednesday is at the centre of the week,
**When**: Wednesday, June 28 2023
**Read more about it**: coming soon
**Read more about it**: [What can you build with Wasp?](/blog/2023/06/28/what-can-you-build-with-wasp)
## Thursday: Take care of your tools 🛠
## Wasp LSP 2.0 | Thursday: Take care of your tools 🛠
<ImgWithCaption
alt="Tools"
@ -119,9 +123,9 @@ Us at Wasp, we are pretty much the same as Gimli - we take our tools seriously.
**When**: Thursday, June 29 2023
**Read more about it**: coming soon
**Read more about it**: [A blog post introing Wasp LSP 2.0](https://wasp-lang.dev/blog/2023/06/29/new-wasp-lsp)
## Friday: Waspularity 🤖 + Tutorial-o-thon!
## GPT Web App Generator | Friday: Waspularity 🤖 + Tutorial-o-thon!
<ImgWithCaption
alt="Waspularity"
@ -134,7 +138,10 @@ To wrap the week up, we'll also start another hackathon, but this time in a bit
**When**: Friday, June 30 2023
**Read more about it**: coming soon
**Read more about it**:
- [Intro Twitter thread](https://twitter.com/WaspLang/status/1674814873312608257)
- [Try GPT Web App Generator!](https://magic-app-generator.wasp-lang.dev/)
- [Join our Tutorial Jam #1 and win prizes!](http://localhost:3002/blog/2023/06/30/tutorial-jam)
## Recap

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,107 @@
---
title: 'What can you build with Wasp?'
authors: [matijasos]
image: /img/build-with-wasp/build-with-wasp-banner.png
tags: [launch-week, showcase]
---
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import InBlogCta from './components/InBlogCta';
import WaspIntro from './_wasp-intro.md';
import ImgWithCaption from './components/ImgWithCaption'
<ImgWithCaption
alt="Launch Week 3 is coming"
source="img/build-with-wasp/build-with-wasp-banner.png"
/>
Welcome to the 3rd day of our [Launch Week #3](blog/2023/06/22/wasp-launch-week-three) - Community Day! Our community is the most important aspect of everything we do at Wasp, and we believe it's only right to have a day dedicated to it.
We'll showcase some of the coolest project built with Wasp so far and through that explore together what kind of apps you can develop with it. Let's dive in!
:::tip
If you're looking for a quick way to start your project, check out our [Ultimate SaaS Starter](https://github.com/wasp-lang/SaaS-Template-GPT). It packs Tailwind, GPT, Stripe ane other popular integrations, all pre-configured for you.
:::
## [CoverLetterGPT.xyz](https://coverlettergpt.xyz/) - GPT-powered cover letter generator
<ImgWithCaption
source="img/build-with-wasp/cover-letter-gpt.png"
/>
**Try it out**: [coverlettergpt.xyz](https://coverlettergpt.xyz/)
**Source code**: https://github.com/vincanger/coverlettergpt
**Wasp features used**: [Social login with Google + auth UI](/blog/2023/04/12/auth-ui), [email sending](http://localhost:3002/docs/guides/sending-emails)
**UI Framework**: [Chakra UI](https://chakra-ui.com/)
Created in the midst of a GPT craze, this is one of the most popular Wasp apps so far! It does exactly what it says on a tin - given job description and your CV, it generates a unique cover letter customized for you. It does that via parsing your CV and feeding it together with the job description to the GPT api, along with the additional settings such as creativity level (careful with that one!).
Although it started as a fun side project, it seems that people actually find it useful, at least as a starting point for writing your own cover letter. CoverLetterGPT has been used to generate close to 5,000 cover letters!
Try it out and have fun or use it as an inspiration for your next project!
## [Amicus.work](https://www.amicus.work/) - most "enterprise SaaS" app 👔 💼
<ImgWithCaption
source="img/build-with-wasp/amicus.png"
/>
**Try it out**: [amicus.work](https://www.amicus.work/)
**Wasp features used**: [Authentication](https://wasp-lang.dev/docs/language/features#authentication--authorization), [email sending](http://localhost:3002/docs/guides/sending-emails), [async/cron jobs](https://wasp-lang.dev/docs/language/features#jobs)
**UI Framework**: [Material UI](https://mui.com/)
This app really gives away those "enterprise SaaS" vibes - when you see it you know it means some serious business! The author describes it as "Asana for you lawyers" ([you can read how the author got first customers for it here](blog/2023/02/14/amicus-indiehacker-interview)), or as an easy way for lawyers to manage and collaborate on their workflows.
File upload, workflow creation, calendar integration, collaboration - this app has it all! Amicus might be the most advanced project made with Wasp so far. Erlis startedbuilding it even with Wasp still in Alpha, and it has withstood the test of time since then.
## Description Generator - GPT-powered product description generator - first acquired app made with Wasp! 💰💰
<ImgWithCaption
source="img/build-with-wasp/description-generator.png"
/>
**Try it out**: [description-generator.online](https://description-generator.online/)
**Wasp features used**: [Social login with Google + auth UI](/blog/2023/04/12/auth-ui)
**UI Framework**: [Chakra UI](https://chakra-ui.com/)
Another SaaS that uses GPT integration to cast its magic! Given product name and instructions on what kind of content you'd like to get, this app generates the professionaly written product listing. It's a perfect fit for marketplace owners that want to present their products in the best light but don't have a budget for the marketing agency.
What's special about Description Generator is that it was recently sold , making it the first Wasp-powered project that got acquired! Stay tuned, as the whole story is coming soon.
## TweetBot - your personal Twitter intern! 🐦🤖
<ImgWithCaption
source="img/build-with-wasp/tweet-bot.png"
/>
**Try it out**: [banger-tweet-bot.netlify.app](https://banger-tweet-bot.netlify.app/)
**Source code**: https://github.com/vincanger/banger-tweet-bot
**Wasp features used**:[Authentication](https://wasp-lang.dev/docs/language/features#authentication--authorization), [async/cron jobs](https://wasp-lang.dev/docs/language/features#jobs)
**UI Framework**: [Tailwind](https://tailwindcss.com/)
The latest and greatest from [Vince's](https://twitter.com/hot_town) lab - an app that serves as your personal twitter brainstorming agent! It takes your raw ideas as an input, monitors current twitter trends (from the accounts you selected) and helps you brainstorm new tweets and also drafts them for you!
While the previously mentioned projects queried the GPT API directly, TweetBot makes use of the [LangChain](https://js.langchain.com/) library, which does a lot of heavy lifting for you, allowing you to produce bigger prompts and preserve the context between subsequent queries.
## Summary
As you could see above, Wasp can be used to build pretty much any database-backed web application! It is especially well suited for so called "workflow-based" applications where you typically have a bunch of resources (e.g. your tasks, or tweets) that you want to manipulate in some way.
With our built-in deployment support (e.g. you can [deploy to Fly.io for free with a single CLI command](https://wasp-lang.dev/docs/deploying)) the whole development process is extremely streamlined.
We can't wait to see what you build next!

View File

@ -0,0 +1,65 @@
---
title: 'Wasp LSP 2.0 - Next-level autocompletion and IDE integration for Wasp projects!'
authors: [matijasos]
image: /img/new-lsp/new-lsp-banner.png
tags: [launch-week, product-update]
---
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import InBlogCta from './components/InBlogCta';
import WaspIntro from './_wasp-intro.md';
import ImgWithCaption from './components/ImgWithCaption'
<ImgWithCaption
source="img/new-lsp/new-lsp-banner.png"
/>
It's the fourth day of our [Launch Week #3](blog/2023/06/22/wasp-launch-week-three) - today it's all about dev tooling and making sure that the time you spend looking at your IDE is as pleasurable as possible!
**We present the next generation of Wasp LSP (Language Server Protocol) implementation for [VS Code](https://marketplace.visualstudio.com/items?itemName=wasp-lang.wasp)**! As you might already know, Wasp has its own simple configuration language (`.wasp`) that acts as a glue between your React & Node.js code.
Although it's a very simple, declarative language (you can think of it as a bit nicer/smarter JSON), and having it allows us to completely tailor the developer experience (aka get rid of boilerplate), it also means we have to provide our own tooling for it (syntax highlighting, auto completion, ...).
We started with syntax highlighting, then basic autocompletion and snippet support, but now we really took things to the next level! Writing Wasp code now is much closer to what we had in our mind when envisioning Wasp.
Without further ado, here's what's new:
## ✨ Autocompletion for config object properties (`auth`, `webSocket`, ...)
Until now, Wasp offered autocompletion only for the top-level declarations such as `page` or `app`. Now, it works for any (sub)-property (as one would expect 😅)!
<ImgWithCaption
source="img/new-lsp/dict-completion.gif"
caption="Fill out your Wasp configuration faster and with less typos! 💻🚀"
/>
## 🔍 Type Hints
Opening documentation takes you out of your editor and out of your flow. Stay in the zone with in-editor type hints! 💡
<ImgWithCaption
source="img/new-lsp/type-hints.gif"
/>
## 🚨 Import Diagnostics
Keep tabs on what's left to implement with JS import diagnostics! There's nothing more satisfying than watching those errors vanish. 😌
<ImgWithCaption
source="img/new-lsp/import-diagnostics.gif"
caption="Wasp now automatically detects if the function you referenced doesn't exist or is not exported."
/>
## 🔗 Goto Definition
Your Wasp file is the central hub of your project. Easily navigate your code with goto definition and make changes in a snap! 💨
<ImgWithCaption
source="img/new-lsp/goto-definition.gif"
caption="Cmd/Ctrl + click and Wasp LSP takes you straight to the function body!"
/>
Don't forget to install [Wasp VS Code extension](https://marketplace.visualstudio.com/items?itemName=wasp-lang.wasp) and we wish you happy coding! You can get started right away and [try it out here](/docs/quick-start).

View File

@ -0,0 +1,114 @@
---
title: 'Tutorial Jam #1 - Teach Others & Win Prizes!'
authors: [vinny]
image: /img/tutorial-jam/tutorial-jam-banner.png
tags: [launch-week, product-update]
---
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import InBlogCta from './components/InBlogCta';
import WaspIntro from './_wasp-intro.md';
import ImgWithCaption from './components/ImgWithCaption'
<ImgWithCaption
source="img/tutorial-jam/tutorial-jam-banner.png"
/>
## Introduction
The Wasp Tutorial Jam is a contest where participants are required to create a tutorial about building a fullstack React/Node app with Wasp.
## Wait, Whats Wasp?
First of all, its sad that youve never heard of [Wasp](https://wasp-lang.dev).
![https://media0.giphy.com/media/kr5PszPQawIRq/giphy.gif?cid=7941fdc6gwgjf866b0akslgciedh53jf9narttadkglvvcp0&ep=v1_gifs_search&rid=giphy.gif&ct=g](https://media0.giphy.com/media/kr5PszPQawIRq/giphy.gif?cid=7941fdc6gwgjf866b0akslgciedh53jf9narttadkglvvcp0&ep=v1_gifs_search&rid=giphy.gif&ct=g)
Wasp is a unique fullstack framework for building React/NodeJS/Prisma/Tanstack Query apps.
Because its based on a compiler, you write a simple config file, and Wasp can take care of generating the skeleton of your app for you (and regenerating when the config file changes). You can read more about [Wasp here](https://wasp-lang.dev)
## Rules
The rules are simple. The tutorial must:
- Use Wasp.
- Be written in English.
- Be original content and not copied from any existing sources.
- Be a written tutorial posted to a social blogging platform like [dev.to](http://dev.to) or [hashnode.dev](http://hashnode.dev), or a YouTube video tutorial
- Contain the hashtag `#buildwithwasp`
- Submitted by pasting the link in the #tutorialjam channel on our [Discord Server](https://discord.gg/rzdnErX)
AND
- The tutorial can focus on any topic and be any length (short or long) just as long as it uses Wasps fullstack capabilities.
![https://media1.giphy.com/media/iB4PoTVka0Xnul7UaC/giphy.gif?cid=7941fdc67jeepog7whrdmkbux0c6kxzb8eyhqwpjcd1tunvp&ep=v1_gifs_search&rid=giphy.gif&ct=g](https://media1.giphy.com/media/iB4PoTVka0Xnul7UaC/giphy.gif?cid=7941fdc67jeepog7whrdmkbux0c6kxzb8eyhqwpjcd1tunvp&ep=v1_gifs_search&rid=giphy.gif&ct=g)
## Judging Criteria
The judging criteria for the Tutorial Jam will be based on:
- Clarity and conciseness of the tutorial.
- Creativity and originality of the tutorial.
- Effectiveness of the tutorial in helping the reader understand and use Wasp to create a fullstack web app or demonstrate a web development topic.
## Templates & Tutorial Examples
We have a whole repo of starter templates that you can use with Wasp by [installing wasp](https://wasp-lang.dev/docs/quick-start) and running `wasp new` in the command line. The interactive prompt will ask you what template youd like to start with:
```bash
[1] basic (default)
Simple starter template with a single page.
[2] todo-ts
Simple but well-rounded Wasp app implemented with Typescript & full-stack type safety.
[3] saas
Everything a SaaS needs! Comes with Google auth, ChatGPT API, Tailwind, & Stripe payments.
[4] embeddings
Comes with code for generating vector embeddings and performing vector similarity search.
[5] WaspAI
An AI powered code scaffolder. Tell it what kind of app you want and get a scaffolded fullstack app
```
In addition, here are some ideas to help you get inspired. You could build a simple fullstack app with Wasp in order to explain some key concepts:
- **Wasps New AI-Generated App Feature:** build any fullstack app using Wasps new AI-generated App feature and explain the process.
- *What worked? What didnt? What are some prompt engineering tips? What did you have to do to get the app in a desired final state?*
- **Full-Stack Type Safety:** Using Wasps low-on-boilerplate fullstack typesaftey, you could dive deep into types on both frontend and backend.
- *How does Wasps fullstack typesafety compare to tRPC and/or the T3 stack?*
- **Data Management:** With complete control and easy implementation of data models, you could explore the concepts of databases, data management and relational data in a simplified environment.
- *What are some tips and tricks for working with Prisma and relational DBs?*
- **Understanding Fullstack Web Development:** Wasp being a fullstack tool truly shines a light on how front-end and back-end connect in web development. Its a great tool for understanding how queries, actions, and other operations in back-end can be utilized in front-end components.
- *How does the HTTP protocol work in detail?*
Or you could write a tutorial that explains how to build:
- **A vector-powered AI app:** Leverage Wasps truly fullstack, serverful architecture to build a personalised tool powered by embeddings and vector stores.
- **Realtime Chat or Polling App:** Any realtime app could take advantage of Wasps easy-to-use websockets features. The tutorial could explain handling real-time data, and other basic back-end concepts.
- **Online Shop:** An e-commerce platform model with features like user registration, product display, a shopping cart, and a check-out process, using Wasps easy to configure authorization, and database management.
## Prizes
The winners of the Wasp Tutorial Jam will receive the following prizes:
- First Place: [Wasp-colored mechanical keyboard](https://www.caseking.de/ducky-one-3-yellow-mini-gaming-tastatur-rgb-led-mx-red-us-gata-1745.html?sPartner=999&gclid=Cj0KCQjw1_SkBhDwARIsANbGpFtYpC2-jFuJ94A6VF6oDFLEZQUya3Ky7P9Ih-nU_Zb9NsDjNhmITbIaAtBMEALw_wcB), and your tutorial and info featured on all our blogs (Wasp official website, dev.to, and hashnode)
- Second Place: 3 months access to [PluralSight](https://www.pluralsight.com/) courses (tons of Software Development courses, tutorials and lessons!) or a $75 Amazon giftcard, and your tutorial featured on all our blogs
- Third Place: Wasp Swag and a feature of your tutorial and info on our social media channels.
<ImgWithCaption
source="img/tutorial-jam/keyboard.png"
/>
## Submission Deadline
All submissions must be received by Sunday, July 16th 11:59 p.m. CET.
Winners will be announced the following week.
## Questions?
Head on over to our [Discord Server](https://discord.gg/rzdnErX) and ask away :)
Good luck!

View File

@ -0,0 +1,108 @@
---
title: 'GPT Web App Generator - Let AI create a full-stack React & Node.js codebase based on your description 🤖🤯'
authors: [martinsos]
image: /img/gpt-wasp/gpt-wasp-thumbnail.png
tags: [wasp-ai, GPT]
---
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ImgWithCaption from './components/ImgWithCaption'
<ImgWithCaption
source="img/gpt-wasp/thumbnail-yellow.png"
/>
This project started out as an experiment - we were interested if, given a short description, GPT can generate a full-stack web app in React & Node.js. The results went beyond our expectations!
## How it works
All you have to do in order to use [GPT Web App Generator](https://magic-app-generator.wasp-lang.dev/) is **provide a short description of your app idea in plain English**. You can optionally select your app's brand color and the preferred authentication method (more methods coming soon).
<ImgWithCaption
source="img/gpt-wasp/how-it-works.gif"
caption="1. Describe your app 2. Pick the color 3. Generate your app 🚀"
/>
That's it - in a matter of minutes, a full-stack web app codebase, written in React, Node.js, Prisma, and Wasp, will be generated right in front of you, and available for you to download, run it locally and deploy with a single CLI command!
See a full one-minute demo here:
<div className='flex justify-center'>
<iframe width="700" height="400" src="https://www.youtube.com/embed/u0MVsPb2MP8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
## The stack 📚
Besides React & Node.js, GPT Web App Generator uses [Prisma](https://www.prisma.io/) and [Wasp](https://github.com/wasp-lang/wasp).
[Prisma](https://www.prisma.io/) is a type-safe database ORM built on top of PostgreSQL. It makes it easy to deal with data models and database migrations.
[Wasp](https://github.com/wasp-lang/wasp) is a batteries-included, full-stack framework for React & Node.js. It takes care of everything from front-end to back-end and database along with authentication, sending emails, async jobs, deployment, and more.
Additionaly, all the code behind GPT Web App Generator is completely open-source: [web app](https://github.com/wasp-lang/wasp/tree/wasp-ai/wasp-ai), [GPT code agent](https://github.com/wasp-lang/wasp/tree/wasp-ai/waspc/src/Wasp/AI).
## What kind of apps can I build with it?
:::caution
Since this is a GPT-powered project, it's output is not 100% deterministic and small mistakes will sometimes occur in the generated code. For the typical examples of web apps (as seen below) they are usually very minor and straightforward to fix.
If you get stuck, [ping us on our Discord](https://discord.gg/rzdnErX).
:::
The generated apps are full-stack and consist of front-end, back-end and database. Here are few of the examples we successfully created:
### My Plants - track your plants' watering schedule 🌱🚰
<ImgWithCaption
source="img/gpt-wasp/my-plants.png"
/>
- See the generated code and run it yourself [here](https://magic-app-generator.wasp-lang.dev/result/3bb5dca2-f134-4f96-89d6-0812deab6e0c)
This app does exactly what it says - makes sure that you water your plants on time! It comes with a fully functioning front-end, back-end and the database with `User` and `Plant` entities. It also features a [full-stack authentication](/blog/2023/04/12/auth-ui) (username & password) and a Tailwind-based design.
The next step would be to add more advanced features, such as email reminders (via [Wasp email sending support](/docs/guides/sending-emails)) when it is time to water your plant.
You can see and download the [entire source code](https://magic-app-generator.wasp-lang.dev/result/3bb5dca2-f134-4f96-89d6-0812deab6e0c) and add more features and deploy the app yourself!
### ToDo app - a classic ✅
<ImgWithCaption
source="img/gpt-wasp/todo-app.png"
/>
- See the generated code and run it yourself [here](https://magic-app-generator.wasp-lang.dev/result/07ed440a-3155-4969-b3f5-2031fb1f622f)
What kind of a demo would this be if it didn't include a ToDo app? GPT Web App Generator successfully scaffolded it, along with all the basic functionality - creating and marking a task as done.
With the foundations in place (full-stack code, authentication, Tailwind CSS design) you can [see & download the code here](https://magic-app-generator.wasp-lang.dev/result/07ed440a-3155-4969-b3f5-2031fb1f622f) and try it yourself!
### Limitations
In order to reduce the complexity and therefore mistakes GPT makes, for this first version of Generator we went with the following limitations regarding generated apps:
1. No additional npm dependencies.
2. No additional files beyond Wasp Pages (React) and Operations (Node). So no additional files with React components, CSS, utility JS, images or similar.
3. No TypeScript, just Javascript.
4. No advanced Wasp features (e.g. Jobs, Auto CRUD, Websockets, Social Auth, email sending, …).
## Summary & next steps
As mentioned above, our goal was to test whether GPT can be effectively used to generate full-stack web applications with React & Node.js. While it's now obvious it can, we have lot of ideas for new features and improvements.
### Challenges
While we were expecting the main issue to be the size of context that GPT has, it turned out to be that the bigger issue is its “smarts”, which determine things like its planning capabilities, capacity to follow provided instructions (we had quite some laughs observing how it sometimes ignores our instructions), and capacity to not do silly mistakes. We saw GPT4 give better results than GPT3.5, but both still make mistakes, and GPT4 is also quite slow/expensive. Therefore we are quite excited about the further developments in the field of AI / LLMs, as they will directly affect the quality of the output for the tools like our Generator.
### Next features wishlist
1. Get feedback on this initial experiment - both on the Generator and the Wasp as a framework itself: best place to leave us feedback is on our [Discord](https://discord.com/invite/rzdnErX).
2. Further improve code agent & web app.
3. Release new version of `wasp` CLI that allows generating new Wasp project by providing short description via CLI. Our code agent will then use GPT to generate project on the disk. This is already ready and should be coming out soon.
4. Also allow Wasp users to use code agent for scaffolding specific parts of their Wasp app → you want to add a new Wasp Page (React)? Run our code agent via Wasp CLI or via Wasp vscode extension and have it generated for you, with initial logic already implemented.
5. As LLMs progress, try some alternative approaches, e.g. try fine-tuning an LLM with knowledge about Wasp, or give LLM more freedom while generating files and parts of the codebase.
6. Write a detailed blog post about how we implemented the Generator, which techniques we used, how we designed our prompts, what worked and what didnt work, … .
## Support us! ⭐️
If you wish to express your support for what we are doing, consider giving us a [star on Github](https://github.com/wasp-lang/wasp)! Everything we do at Wasp is open source, and your support motivates us and helps us to keep making web app development easier and with less boilerplate.

View File

@ -10,6 +10,12 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
To enable support for Tailwind in your Wasp project, you simply need to add two config files (`tailwind.config.cjs` and `postcss.config.cjs`) to the root directory. When they are present, Wasp will add the necessary NPM dependencies and copy your config files into the generated project output. You can then start adding [Tailwind CSS directives](https://tailwindcss.com/docs/functions-and-directives#directives) to your CSS files and `className`s to your React components.
:::tip
**After adding the required config files, make sure to restart the local Wasp server** via your CLI (just run `wasp start` again). In some cases it is neccesary for Tailwind to become functional in your app.
:::
### New project tree overview
```bash title="tree ." {6,13-14}
.

View File

@ -9,7 +9,7 @@ const Announcement = () => {
let history = useHistory();
const handleLink = () => {
history.push('/blog/2023/06/22/wasp-launch-week-three')
history.push('/blog/2023/06/30/tutorial-jam')
//history.push('/#signup')
//window.open('https://twitter.com/MatijaSosic/status/1646532181324603395')
@ -39,7 +39,7 @@ const Announcement = () => {
`}
>
<span className='item-center flex gap-2 px-3'>
<span>🔮 Wasp Launch Week #3: Jun 26 - 30</span>
<span>📝 Join our Tutorial Jam #1 and win cool prizes!</span>
</span>
<span className='hidden items-center space-x-2 px-3 lg:flex'>

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 233 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB