Skip to content

Instantly share code, notes, and snippets.

@crswll
Last active August 17, 2022 15:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crswll/786c4d68fc79a87ecc91edd67c735155 to your computer and use it in GitHub Desktop.
Save crswll/786c4d68fc79a87ecc91edd67c735155 to your computer and use it in GitHub Desktop.
Save the file somewhere helpful, `chmod +x ./next-setup.sh`, then run `./next-setup.sh project-name`, then `cd project-name` then `yarn run dev` and you're good to go.
# Set up the next app.
yarn create next-app $1 --typescript
# cd into it.
cd $1
# add tailwind and its deps
yarn add -D tailwindcss postcss autoprefixer postcss-import
# remove the default css file, we're going to replace it later
rm styles/globals.css
mkdir src
mv pages src/pages
mv styles src/styles
# write postcss.config.js
echo "module.exports = {
plugins: {
\"postcss-import\": {},
tailwindcss: {},
autoprefixer: {},
},
}
" >> ./postcss.config.js
# write tailwind.config.js
echo "/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
\"./src/**/*.{tsx,ts}\"
],
theme: {
extend: {},
},
plugins: [],
}
" >> ./tailwind.config.js
# write src/styles/globals.css
echo "@import \"tailwindcss/base\";
@import \"tailwindcss/components\";
@import \"tailwindcss/utilities\";
" >> ./src/styles/globals.css
yarn create next-app $1
cd $1
yarn add -D tailwindcss postcss autoprefixer
# postcss.config.js
echo "module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
" >> ./postcss.config.js
# Write tailwind.config.js
echo "/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
\"./pages/**/*.{jsx,js}\"
],
theme: {
extend: {},
},
plugins: [],
}
" >> ./tailwind.config.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment