I don’t like to do relative imports like this: import CrazyComponent from "../../components/CrazyComponent"; Instead, I like to import my components (stores, helpers, models, etc.) like this: import CrazyComponent from "@/components/CrazyComponent"; You might want to configure some stuff to make this possible. I will outline these configurations below: ESLint First, install eslint-import-resolver-custom-alias: npm install eslint-import-resolver-custom-alias --save-dev In your eslintrc.js or the eslintConfig section in your package.json, add the following resolver under "import/resolver".

For my client I am currently building a website that makes use of tailwindcss image/svg+xml , a utility-first image/svg+xml CSS framework. With utility classes you can directly style elements using classes such as text-center (center the text) or bg-red-600 (red background, shade 600). Tailwindcss contains a lot of those classes and also allows combining breakpoints with these classes, such as md:font-bold (make font bold on medium sized devices or larger).

This is mainly a note to myself that I can use as a reference when a future me is making the same mistake again. As I am creating the Wordpress theme for this website, I ran into some issues when trying to import the font that is currently used in the website’s title heading. My folder structure is as follows: src - css - fonts dist - css - fonts And I import my font like this: