Create Nextjs with Tailwind - NextWind

Tue Feb 07 2023 by Willow

A simpler way to create nextjs app with tailwind without having to go through complicated steps. I call this NextWind.

Note: I will be using pnpm for this project.

Concept:

A direct way to create Nextjs app with tailwind out of the box.

Tools:

Nextjs, Tailwind, Python

Normal Way:

pnpm create-next-app 
pnpm i -D tailwindcss autoprefixer postcss
npx tailwindcss init -p

# then modify tailwind config file
# then add tailwind imports to global css

Improved way:

#!/Users/user/path/to/python
# nextwind.py

import subprocess
import re
import sys, os

test = 'ls -A'
crn = f'pnpm create next-app --typescript --eslint {sys.argv[1]}'
dependencies = 'pnpm i -D tailwindcss postcss autoprefixer'
tailwindInit = 'npx tailwindcss init -p'
dirs = "content: ['./pages/**/*.{js,ts,jsx,tsx}','./src/**/*.{js,ts,jsx,tsx}','./app/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}']"
tailwindcss = '\n@tailwind base;\n@tailwind components;\n@tailwind utilities;'


def tailwindConfig():
    try:
        with open('tailwind.config.js','r') as f:
            content = f.readlines()
            modified = re.sub('(content:\s*?\[\s*?\])',dirs,"".join(content))
            f.close()

        with open('tailwind.config.js','w') as f:
            f.write(modified)
            f.close()
    except:
        print('failed to edit tailwind.config.js')

def main():
    subprocess.run(crn.split(' '))
    os.chdir(sys.argv[1])
    subprocess.run(dependencies.split(' '))
    subprocess.run(tailwindInit.split(' '))
    tailwindConfig()
    print(tailwindcss)

if __name__ == '__main__':
    main()

Explaination:

• pnpm commands are executed using the subprocess module
• python then changes its working directory inside the newly create project folder
• tailwind config file is modified using the built in file processing commands, open()
• the terminal will print out tailwind import css code snippet, which needs to be copied to the global css file because we cannot precisely determine the global css file accurately. This file needs to be imported into the main app!

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;