Tailwindcss

How can i properly add tailwind to my project?

9 Replies

MEE6•7mo ago

Wohooo @Jestem_Kamil, you just became a Waspeteer level 1!

Hi @Jestem_Kamil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Jestem_KamilOP•7mo ago

i just want bot answer

kapa.ai•7mo ago

---------------------- To add Tailwind CSS to your Wasp project, you need to follow these steps: 1. Add two configuration files, tailwind.config.cjs and postcss.config.cjs, to the root directory of your project. Here's an example of how these files should look: tailwind.config.cjs:

const { resolveProjectPath } = require('wasp/dev')  
  
/** @type {import('tailwindcss').Config} */  
module.exports = {  
 content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],  
 theme: {  
 extend: {},  
 },  
 plugins: [],  
}

const { resolveProjectPath } = require('wasp/dev')  
  
/** @type {import('tailwindcss').Config} */  
module.exports = {  
 content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],  
 theme: {  
 extend: {},  
 },  
 plugins: [],  
}

postcss.config.cjs:

module.exports = {  
 plugins: {  
 tailwindcss: {},  
 autoprefixer: {},  
 },  
}

module.exports = {  
 plugins: {  
 tailwindcss: {},  
 autoprefixer: {},  
 },  
}

2. Import Tailwind into your CSS file. For example, in a new project you might import Tailwind into Main.css. ./src/Main.css:

@tailwind base;  
@tailwind components;  
@tailwind utilities;

@tailwind base;  
@tailwind components;  
@tailwind utilities;

3. Start using Tailwind in your React components. For example: ./src/MainPage.jsx:

// ...  
  
<h1 className="text-3xl font-bold underline">  
 Hello world!  
</h1>  
  
// ...

// ...  
  
<h1 className="text-3xl font-bold underline">  
 Hello world!  
</h1>  
  
// ...

If you want to add Tailwind plugins, install them as npm development dependencies and add them to the plugins list in your tailwind.config.cjs file. For example:

npm install -D @tailwindcss/forms  
npm install -D @tailwindcss/typography

npm install -D @tailwindcss/forms  
npm install -D @tailwindcss/typography

And then add them to your tailwind.config.cjs file:

/** @type {import('tailwindcss').Config} */  
module.exports = {  
 // ...  
 plugins: [  
 require('@tailwindcss/forms'),  
 require('@tailwindcss/typography'),  
 ],  
 // ...  
}

/** @type {import('tailwindcss').Config} */  
module.exports = {  
 // ...  
 plugins: [  
 require('@tailwindcss/forms'),  
 require('@tailwindcss/typography'),  
 ],  
 // ...  
}

If you can't use Tailwind after adding the required config files, make sure to restart wasp start. This is sometimes needed to ensure that Wasp picks up the changes and enables Tailwind integration. For more details, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/project/css-frameworks#tailwind). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jestem_Kamil, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Jestem_KamilOP•7mo ago

can i install it 100% like in normal Vite project? npx tailwindcss init @kapa.ai

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @Jestem_Kamil, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Jestem_KamilOP•7mo ago

@kapa.ai can i install it 100% like in normal Vite project? npx tailwindcss init

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- No, the process of adding Tailwind CSS to a Wasp project is slightly different from a normal Vite project. In a Wasp project, you need to manually create and configure the tailwind.config.cjs and postcss.config.cjs files in the root directory of your project. Here's an example of how these files should look: tailwind.config.cjs:

const { resolveProjectPath } = require('wasp/dev')  
  
/** @type {import('tailwindcss').Config} */  
module.exports = {  
 content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],  
 theme: {  
 extend: {},  
 },  
 plugins: [],  
}

const { resolveProjectPath } = require('wasp/dev')  
  
/** @type {import('tailwindcss').Config} */  
module.exports = {  
 content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],  
 theme: {  
 extend: {},  
 },  
 plugins: [],  
}

postcss.config.cjs:

module.exports = {  
 plugins: {  
 tailwindcss: {},  
 autoprefixer: {},  
 },  
}

module.exports = {  
 plugins: {  
 tailwindcss: {},  
 autoprefixer: {},  
 },  
}

You then need to import Tailwind into your CSS file and start using Tailwind in your React components. For more details, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/project/css-frameworks#tailwind). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jestem_Kamil, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

martinsos•7mo ago

@Jestem_Kamil check this out for exact instructions https://wasp-lang.dev/docs/project/css-frameworks#tailwind

Gaming

Programming

Tailwindcss