DEV Community

naveennamani
naveennamani

Posted on • Updated on

Offline documentation of tailwindcss in 5 easy steps

This post is a 2nd one in the Offline documentation series. If you're new here check out my first post.

Generate offline documentation of reactjs in 5 minutes

In this post, let's build the offline documentation for tailwindcss, my favorite utility first CSS framework, and my go to CSS framework for rapidly prototyping a design.

Getting the source code

The documentation for tailwindcss is available on tailwindcss.com website. We can easily find the source code for this website on github through a simple google search. It is hosted on github at https://github.com/tailwindlabs/tailwindcss.com.

Let us first download the source code and inspect.

git clone https://github.com/tailwindlabs/tailwindcss.com
cd tailwindcss.com
Enter fullscreen mode Exit fullscreen mode

Open the code editor of your choice. If using vscode, just enter

code .
Enter fullscreen mode Exit fullscreen mode

Understanding the tech stack

If we look at the files in the root directory, we can understand that

  1. next.config.js - The website is written in nextjs
  2. tailwind.config.js - The website is build using tailwindcss as the CSS framework (what else you expect?)
  3. yarn.lock - using yarn as the package manager

For understanding the deployment process of nextjs, we can simply go to its corresponding documentation website. You can find the information in below links.

  1. Deployment | Next.js
  2. Advanced features: Static HTML Export | Next.js

package.json

Once you gain enough info on how deployment works, let's open package.json file and see if we have the required scripts already present. Luckily, we have the script export for generating static files. Our life has been made easier already.

Scripts in package.json file

Commands

Now we have enough information to generate the documentation.

  1. Install all the dependencies using the yarn package manager.

    yarn install
    
  2. Run the build script using

    yarn export
    

    This will generate the required static HTML, js, css and all assets in the out folder.

  3. Serve the documentation generated in out folder

    cd out
    python -m http.server // simpler
    // Or if you prefer nodejs
    yarn global add serve
    serve
    

Congratulations! We now have tailwindcss documentation available offline.

If you would like to have offline documentation for any framework/library you require, please tell us in the comments.

Pro tip for vscode users

jsconfig.json

If you have the following directory structure

Home
\- components
   |- A.js
   |- B.js

utils
\- utils.js
Enter fullscreen mode Exit fullscreen mode

and want to import utils.js in A.js, you need to use relative paths as follows

import utils from "../../utils/utils.js"
Enter fullscreen mode Exit fullscreen mode

This makes it harder to follow the file being imported, and once you have a folder structure 3 or more levels deep, this makes it even harder to write the required imports keeping in mind all the folders.

jsconfig.json to the rescue!

You can use "compilerOptions" > "paths" dictionary to define the path mappings relative to the root of the project.

{
    "compilerOptions": {
        "paths": {
            "@/utils/*": ["utils/*"],
            "@/home/*": ["Home/components/*"]
         },
    }
}
Enter fullscreen mode Exit fullscreen mode

Now instead of all those relative paths to import utils, you can simply use

import utils from "@/utils/utils.js"
Enter fullscreen mode Exit fullscreen mode

to import the utils, and to import A.js in any other file, we can write

import A from "@/home/A.js"
Enter fullscreen mode Exit fullscreen mode

You can see this jsconfig.json file being used in the tailwindcss.com project. Go inspect the source code and have fun learning new things.

Happy coding!

Discussion (5)

Collapse
paulschraven profile image
Paul Schraven

It's "yarn global add serve" :)

Collapse
naveennamani profile image
naveennamani Author

Thanks for pointing out, fixed.

Collapse
rejoanahmed2 profile image
Mohd Rejoan

everything works except last command "yarn"

Collapse
naveennamani profile image
naveennamani Author

Are you able to run yarn export and see the generated static HTML files in out directory? If you're not able to install serve package using yarn, try installing it using npm, or run npx serve.

Collapse
arielmeee profile image
arielmeee

Thanks man! I also love how you point out that pro tip.