How I set up my Frontend Mentor projects with Tailwind CSS

Recent changes in my workload at work have prevented me from enjoying being a developer as much as I normally would - that is, there are no front-end features to build. To compensate for this, I restarted project development on a front-end mentor platform, which provides beautiful UI mockups that developers can turn into real projects. I started using the platform about a year ago and have been impressed not only by the quality of the projects, but also by its focus on community building, with a particular focus on educating developers on accessibility best practices. This is a great resource that I highly recommend to any developer looking to hone their front-end skills on real-world projects - varying levels of difficulty, starting with very simple projects that only require HTML and CSS, so every There’s a project for every skill level!

One of the great things about this platform is that it only provides a design and some basic starter code, so you are free to choose any combination of technologies you like to complete your project. Personally, I'm trying to reduce the use of frameworks ¹ and focus on writing semantic HTML and adding some pure JS for interactivity, so that's the bulk of my future solutions.

That being said, I still really like Tailwind as my side project styling solution. I've been using it professionally for about three years now, and I've found that it strikes a good balance between useful default utility classes and a pleasant development experience when extending its basic functionality (we'll detail this below). I'm not suggesting that beginners should start building with Tailwind right away - be sure to learn CSS first! However, as someone who knows a lot about how CSS works, Tailwind is a productivity tool for me because I understand what its utility classes do under the hood.

So after I completed a few challenges with the front-end mentor, I've had to add Tailwind to the provided project startup code several times. I thought it might be helpful for other developers who are new to the platform but want to use Tailwind in their projects, to document my workflow for installing and configuring Tailwind in a typical startup project. As with many things in dependency management, there are probably a million different ways to do it. This is just my preferred method, so your actual results may vary.

Install Tailwind

Package installation

First, you need to navigate to the root directory of the startup code you downloaded from Front End Tutor and run the following command to install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Some notes on dependencies:

• Tailwind CSS uses PostCSS to handle your CSS. PostCSS is a tool that uses JavaScript plug-ins to convert CSS, and Tailwind CSS itself is a PostCSS plug-in ².
• Autoprefixer is a PostCSS plugin that adds vendor prefixes to your CSS rules using values ​​from Can I Use. It ensures that your CSS works across different browsers.

Technically these are not required to install Tailwind in your project, but I generally find it runs smoother when using them.

Initialize TailwindCSS

Next, we are going to generate the tailwind.config.js and postcss.config.js files using the following commands:

npx tailwindcss init -p

Configure source path

Next, navigate to tailwind.config.js and add index.html to the content array - this will ensure unnecessary styles are cleared out. You can read more about how this actually works in Tailwind's Content Config documentation.

Please note that if you create multiple HTML files for your project that will be styled using the Tailwind utility classes, you must also add their paths to this array.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Include Tailwind in your CSS

Create a CSS file in the root of your project (I usually name it styles.css) and add the following content to it:

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Add and run build scripts

In your package.json file, add a script to build your CSS. This will create an output.css file containing the built styles. The --watch flag allows us to watch CSS changes in real time, meaning we don't have to restart the script every time we update a style.

Note that you can name this command anything you like - I'm just following convention here.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

Now you can compile your CSS by running the following script:

npm run build:css

Link stylesheet

Finally, you need to include a link tag in the head of your index.html file (and any other HTML files you want the styles to apply to):

<code><link href="output.css" rel="stylesheet"></link></code>

You should now be able to test whether Tailwind works in this file. I usually add something like >

Install project fonts

When you download the startup code for your project from Front End Mentor, they contain font files for the fonts in the designs you will build. This usually includes a combination of variable font files and static font files. For our purposes we will use the files provided in ./assets/fonts/static.

I recommend you look at these files as well as the style-guide.md file provided in the project root directory to see which fonts are used and which font weights are required.

Add @font-face rule

Once that's determined, you need to create another new CSS file in the project root (I usually name it fonts.css) and then define @font-face rules for each font file provided in the startup code:

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

The example above is from my solution to the social link profile challenge, which uses three different weights of the Inter font.

After defining the font face, you need to link the style sheet in the HTML document just like using output.css earlier:

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Extended Tailwind configuration

Now we need to extend the theme in tailwind.config.js to add some utility classes to apply our project fonts where needed:

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Please note that if your project has multiple custom fonts, you can define any number of properties in the fontFamily object. You can name these properties anything you like, but I usually just convert the font's name to a hyphen to be consistent with how most Tailwind utilities are written out of the box, such as comic-sans.

You should now be able to add the font-inter class to your HTML and see your new font applied to your markup! You can also use the different font weights we set, such as font-semibold to apply the font at 600 weight.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

The above is the detailed content of How I set up my Frontend Mentor projects with Tailwind CSS. For more information, please follow other related articles on the PHP Chinese website!