Tailwind CSS in JetBrains IDEs

Something that I have to do quite a lot but don’t ever remember how to actually do it. Perfect blog post fodder.

1npm install -D tailwindcss

This step is not actually necessary, but I really like DaisyUI, so I normally use it.

1npm install -D daisyui
2npm install -D @tailwindcss/typography
3npm install -D @tailwindcss/forms

Next you have to initialise Tailwind. This will create your tailwind.config.js file.

1npx tailwindcss init

You need to then go and configure the tailwind.config.js file. By default, it will look something like this.

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [],
4  theme: {
5    extend: {},
6  },
7  plugins: [],
8}

All of your tailwindcss configuration will go in here; in the end it will look something like this:

 1/** @type {import('tailwindcss').Config} */
 2module.exports = {
 3    content: ["./static/**/*.{css,html,js}", "./templates/**/*.html"],
 4    theme: {
 5        extend: {
 6            gridTemplateColumns: {
 7                // Complex site-specific column configuration
 8                'sidebarlayout': 'minmax(100px, 250px) 1fr',
 9            },
10            height: {
11                'main': 'calc(100vh - 64px)',
12            }
13        },
14    },
15    plugins: [
16        require("@tailwindcss/typography"),
17        require("daisyui"),
18    ],
19    daisyui: {
20        themes: ["dark", "fantasy"],
21        darkTheme: "dark"
22    },
23}

When using PyCharm and GoLand for development, it's essential to remember to initiate the CSS compilation when starting the development web server. You can do that with the following command.

1npx tailwindcss -i ./static/css/tw-input.css -o ./static/css/main.css --watch --minify

Use the command above to compile and watch the files configured in tailwind.config.js for recompilation and updates. You can use the IDE's Run Configurations instead of running the command manually every time to re-compile the CSS. The first step is to edit the package.json file and create a script that is the same as the previous command. Below is what my package.json looks like with the script in there.

 1{
 2  "devDependencies": {
 3    "@tailwindcss/forms": "^0.5.6",
 4    "@tailwindcss/typography": "^0.5.10",
 5    "daisyui": "^3.9.1",
 6    "tailwindcss": "^3.3.3"
 7  },
 8  "scripts": {
 9    "TailwindCSSRun": "npx tailwindcss -i ./static/css/tw-input.css -o ./static/css/main.css --watch --minify"
10  }
11}

Once we have the script in the package.json we will be able to configure an NPM run command. This screen capture shows you how to do that.

This blog post needs to be finished