← All posts
17 February 2024 · 2 min read

Tailwind CSS in JetBrains IDEs

Tailwindcss Web Development

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

npm install -D tailwindcss

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

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

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

npx tailwindcss init

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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./static/**/*.{css,html,js}", "./templates/**/*.html"],
    theme: {
        extend: {
            gridTemplateColumns: {
                // Complex site-specific column configuration
                'sidebarlayout': 'minmax(100px, 250px) 1fr',
            },
            height: {
                'main': 'calc(100vh - 64px)',
            }
        },
    },
    plugins: [
        require("@tailwindcss/typography"),
        require("daisyui"),
    ],
    daisyui: {
        themes: ["dark", "fantasy"],
        darkTheme: "dark"
    },
}

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.

npx 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.

package.json
{
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.6",
    "@tailwindcss/typography": "^0.5.10",
    "daisyui": "^3.9.1",
    "tailwindcss": "^3.3.3"
  },
  "scripts": {
    "TailwindCSSRun": "npx tailwindcss -i ./static/css/tw-input.css -o ./static/css/main.css --watch --minify"
  }
}

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

Related
16 Feb 2023

Duplicate key violates unique constraint

Read more →