CSS

When using tailwindcss in vscode, you may encounter issues where the plugin does not work, fails to auto-complete, and does not display class names in color. There are several methods to troubleshoot this issue. The problems can be investigated in the following order. Check the Plugin’s Log Output Use Ctrl + Shift + P, search for tailwind css show output. Check the log for any errors. For instance, if there are errors related to missing dependencies. For example, if the log shows an error like Tailwind CSS: Can’t resolve ‘@headlessui/tailwindcss’, then installing the corresponding dependency can solve the problem. npm i --save-dev @headlessui/tailwindcss File Not Included in tailwindcss Check if the file is included in tailwindcss. Open the tailwind.config.js file, and add the files that need to be included in the content field. /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{html,js,html.j2}", "./templates/**/*.html.j2", "./public/**/*.{html,js,css}", ], theme: { extend: {}, }, plugins: [], }; vscode Not Enabling Quick Suggestions for String Inputs Add the following configuration in vscode’s settings. ...