594e8446b4
====================== Updated docs/advanced/apis to 0.12. (#1729) Updated docs/advanced/middleware-config to 0.12. (#1730) Updated docs/advanced/links to 0.12. (#1732) Updated docs/advanced/web-sockets to 0.12. (#1733) Updated docs/advanced/email to 0.12. (#1734) Auth docs rework (#1723) Updated docs/advanced/jobs to 0.12. (#1740) Updates starter templates (#1744) Updates general docs (#1745) Update customising app docs (#1748) Updates client setup (#1749) Change server config docs (#1750) Updates CSS frameworks docs (#1753) Updates static assets docs (#1751) Updates custom vite config docs (#1754) Update testing docs (#1752) Updated docs/introduction/* to 0.12. (#1756) Restructuring data model docs (#1739) Updates depedencies docs (#1768) Co-authored-by: Mihovil Ilakovac <mihovil@ilakovac.com>
2.7 KiB
| title |
|---|
| CSS Frameworks |
import useBaseUrl from '@docusaurus/useBaseUrl';
Tailwind
To enable support for Tailwind in your project, you need to add two config files — tailwind.config.cjs and postcss.config.cjs — to the root directory.
With these files present, Wasp installs the necessary dependencies and copies your configuration to the generated project. You can then use Tailwind CSS directives in your CSS and Tailwind classes on your React components.
.
├── main.wasp
├── package.json
├── src
│ ├── Main.css
│ ├── MainPage.jsx
│ ├── vite-env.d.ts
│ └── waspLogo.png
├── public
├── tsconfig.json
├── vite.config.ts
# highlight-start
├── postcss.config.cjs
└── tailwind.config.cjs
# highlight-end
:::tip Tailwind not working?
If you can not 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.
:::
Enabling Tailwind Step-by-Step
:::caution
Make sure to use the .cjs extension for these config files, if you name them with a .js extension, Wasp will not detect them.
:::
- Add
./tailwind.config.cjs.
const { resolveProjectPath } = require('wasp/dev')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
theme: {
extend: {},
},
plugins: [],
}
- Add
./postcss.config.cjs.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
- Import Tailwind into your CSS file. For example, in a new project you might import Tailwind into
Main.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */
- Start using Tailwind 🥳
// ...
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
// ...
Adding Tailwind Plugins
To add Tailwind plugins, install them as npm development dependencies and add them to the plugins list in your tailwind.config.cjs file:
npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography
and also
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
// ...
}