Skip to Content
This question has been flagged
3 Respostes
6385 Vistes
Avatar
khadetou

I would like to use tailwindcss in my odoo 16 website templating, how to properly intergrate it ?

Avatar
Descartar
Avatar
khadetou
Autor Best Answer

Galaxy Weblinks Thank you i found the answer helpful! However Here's the modified response incorporating your instructions:

Install Tailwind CSS by running the following command:


npm install -D tailwindcss


Initialize the configuration file by running:

npx tailwindcss init


In the generated configuration file use (tailwind.config.js) the following code:


/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./custom_addons/**/*.{html,js,xml}"], // Make sure to include your custom addons' paths here as well
theme: {
extend: {},
},
plugins: [],

blocklist: ['container', 'collapse'], // Add classes to blocklist to avoid generating them
};
Save the above configuration file.

Run the following command to compile Tailwind CSS and generate the output CSS file:

npx tailwindcss -i ./custom_addons/theme_name/static/src/css/input.css -o ./custom_addons/theme_name/static/src/css/dist/output.css --watch

Make sure to replace theme_name with the actual name of your theme. This command will watch for changes in the input CSS file and automatically update the output CSS file whenever changes are made.

In the __manifest__.py file, update the assets section to include the output CSS file:

{
'name': 'Your Theme',
'version': '1.0',
'summary': 'Summary of your theme',
'description': 'Description of your theme',
'category': 'Theme/Creative',
'author': 'Your Name',
'depends': ['web'],
'data': [
'views/assets.xml',
],
'images': [
'static/description/banner.png',
],
'application': False,
'license': 'LGPL-3',
'assets': {
'web.assets_frontend': [
'theme_name/static/src/css/dist/output.css', # Add the path to the generated output CSS file
# Other CSS paths if you have any
],
},
'installable': True,
}
Save the __manifest__.py file with the modifications.

Reload your application, and it should work fine with the updated Tailwind CSS configuration.

Avatar
Descartar
Avatar
Hugo Gonzalez
Best Answer

On your custom component add the loadJS function to load the tailwind cdn

const ajax=require('web.ajax');

export class OwlTodoList extends Component {
    setup() {
        onWillStart(() => {
            ajax.loadJS('https://cdn.tailwindcss.com')
        })
    }
}

In the latest versions you must import it from owl

import { loadJS, loadCSS } = owl;
Avatar
Descartar
khadetou
Autor

Thanks mate!

Avatar
Galaxy Weblinks
Best Answer

To integrate Tailwind CSS into Odoo v16, you can follow these steps:

1.Install Tailwind CSS: The first step is to install Tailwind CSS in your Odoo project. You can do this by adding Tailwind CSS as a dependency using a package manager like npm or Yarn. Open a terminal or command prompt, navigate to your Odoo project directory, and run the following command:
npm install tailwindcss
This will install Tailwind CSS and its dependencies in your project.

2.Create Tailwind CSS Configuration: In your Odoo project directory, create a Tailwind CSS configuration file named tailwind.config.js. This file will contain the configuration settings for Tailwind CSS. You can create the file manually or use the following command to generate a default configuration file:
npx tailwindcss init

3.Customize Tailwind CSS Configuration (Optional): Open the tailwind.config.js file in a text editor and modify the configuration as per your project's requirements. You can customize colors, spacing, breakpoints, and various other aspects of Tailwind CSS in this file.

4.Create CSS File: Create a new CSS file where you will write your custom CSS or extend Tailwind CSS. For example, you can create a file named custom.css in your Odoo project's static folder.

5.Import Tailwind CSS: In your CSS file, import Tailwind CSS by adding the following line at the beginning:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
This will import the base, components, and utilities styles from Tailwind CSS.

6.Write Custom CSS: Below the import statements, you can write your custom CSS rules or extend Tailwind CSS classes as needed. You can use the utility classes provided by Tailwind CSS or create your own custom styles.

7.Include CSS in Odoo: In your Odoo module, create or update a manifest file (__manifest__.py) to include the CSS file. Add the following lines under the data key:
'css': [
'static/custom.css',
],

8.Build Assets: After completing the above steps, you need to build the assets for Odoo to recognize and include the Tailwind CSS styles. In your Odoo project directory, run the following command:
npx odoo-bin --addons-path=addons/ -u
Replace with the name of your Odoo module or the module where you included the CSS file. This command rebuilds the assets and applies the changes.

9.Restart Odoo Server: Finally, restart your Odoo server to apply the changes and load the updated assets.

After following these steps, your Odoo instance should be integrated with Tailwind CSS. You can now use Tailwind CSS classes and your custom styles to style your Odoo components and templates.


Thank you
Galaxy Weblinks
Skype-live:.cid.32795179bb452e97

Avatar
Descartar