verellino/nuxt-three-tailwind

NTT-Template

• The Template for Nuxt.js + Tailwind CSS + Three.js Projects.

• Installed and set up plugins and buildModules: v-click-outside + vue-tippy + nuxt-gsap-module

• Animation with: gsap

Comes with Tailwind CSS customization

• Customized

  Spacing

  spacing: {
  
  	'0': '0',
  	'px': '1px',
  	'2px': '2px',
  	'1': '0.25rem',
  	'2': '0.5rem',
  	'3': '0.75rem',
  	'4': '1rem',
  	'5': '1.25rem',
  	'6': '1.5rem',
  	'7': '1.75rem',
  	'8': '2rem',
  	'9': '2.25rem',
  	'10': '2.5rem',
  	'12': '3rem',
  	'14': '3.5rem',
  	'16': '4rem',
  	'18': '4.5rem',
  	'20': '5rem',
  	'22': '5.5rem',
  	'24': '6rem',
  	'26': '6.5rem',
  	'28': '7rem',
  	'30': '7.5rem',
  	'32': '8rem',
  	'34': '8.5rem',
  	'36': '9rem',
  	'38': '9.5rem',
  	'40': '10rem',
  	'42': '10.5rem',
  	'44': '11rem',
  	'46': '11.5rem',
  	'48': '12rem',
  	'50': '12.5rem',
  	'52': '13rem',
  	'58': '14.5rem',
  	'60': '15rem',
  	'64': '16rem',
  	'72': '18rem',
  	'80': '20rem',
  	'84': '21rem',
  	'88': '22rem',
  	'92': '23rem',
  	'96': '24rem',
  	'100': '25rem',
  	'104': '26rem',
  	'108': '27rem',
  	'112': '28rem',
  	'120': '30rem',
  	'128': '32rem',
  	'132': '33rem',
  	'140': '35rem',
  	'160': '40rem',
  	'168': '42rem',
  	'172': '43rem',
  	'176': '44rem',
  	'180': '45rem',
  	'184': '46rem',
  	'188': '47rem',
  
  }

  Scale

  scale: {
  
  	'0': '0',
  	'15': '.15',
  	'25': '.25',
  	'50': '.5',
  	'75': '.75',
  	'80': '.8',
  	'90': '.9',
  	'100': '1',
  	'125': '1.25',
  	'150': '1.5',
  	'200': '2',
  	'300': '3',
  	'400': '4',
  
  }

  Opacity

  opacity:{
  
  	'0':'0',
  	'10':'0.1',
  	'20':'0.2',
  	'25':'0.25',
  	'30':'0.3',
  	'40':'0.4',
  	'50':'0.5',
  	'60':'0.6',
  	'70':'0.7',
  	'75':'0.75',
  	'80':'0.8',
  	'90':'0.9',
  	'100':'1'
  
  }

  minHeight

  minHeight: {
  
  	'0': '0',
  	'10': '2.5rem',
  	'12': '3rem',
  	'14': '3.5rem',
  	'16': '4rem',
  	'18': '4.5rem',
  	'20': '5rem',
  	'22': '5.5rem',
  	'24': '6rem',
  	'26': '6.5rem',
  	'28': '7rem',
  	'30': '7.5rem',
  	'32': '8rem',
  	'34': '8.5rem',
  	'36': '9rem',
  	'38': '9.5rem',
  	'40': '10rem',
  	'42': '10.5rem',
  	'44': '11rem',
  	'46': '11.5rem',
  	'48': '12rem',
  	'50': '12.5rem',
  	'52': '13rem',
  	'58': '14.5rem',
  	'60': '15rem',
  	'64': '16rem',
  	'1/4': '25%',
  	'1/2': '50%',
  	'3/4': '75%',
  	'full': '100%',
  
  }

  maxHeight

  maxHeight: {
  
  	'0': '0',
  	'10': '2.5rem',
  	'12': '3rem',
  	'14': '3.5rem',
  	'16': '4rem',
  	'18': '4.5rem',
  	'20': '5rem',
  	'22': '5.5rem',
  	'24': '6rem',
  	'26': '6.5rem',
  	'28': '7rem',
  	'30': '7.5rem',
  	'32': '8rem',
  	'34': '8.5rem',
  	'36': '9rem',
  	'38': '9.5rem',
  	'40': '10rem',
  	'42': '10.5rem',
  	'44': '11rem',
  	'46': '11.5rem',
  	'48': '12rem',
  	'50': '12.5rem',
  	'52': '13rem',
  	'58': '14.5rem',
  	'60': '15rem',
  	'64': '16rem',
  	'1/4': '25%',
  	'1/2': '50%',
  	'3/4': '75%',
  	'full': '100%',
  
  }

  minWidth

  minWidth: {
  
  	'0': '0',
  	'10': '2.5rem',
  	'12': '3rem',
  	'14': '3.5rem',
  	'16': '4rem',
  	'18': '4.5rem',
  	'20': '5rem',
  	'22': '5.5rem',
  	'24': '6rem',
  	'26': '6.5rem',
  	'28': '7rem',
  	'30': '7.5rem',
  	'32': '8rem',
  	'34': '8.5rem',
  	'36': '9rem',
  	'38': '9.5rem',
  	'40': '10rem',
  	'42': '10.5rem',
  	'44': '11rem',
  	'46': '11.5rem',
  	'48': '12rem',
  	'50': '12.5rem',
  	'52': '13rem',
  	'58': '14.5rem',
  	'60': '15rem',
  	'64': '16rem',
  	'1/4': '25%',
  	'1/2': '50%',
  	'3/4': '75%',
  	'full': '100%'
  
  }

  maxWidth

  maxWidth: {
  
  	'0': '0',
  	'10': '2.5rem',
  	'12': '3rem',
  	'14': '3.5rem',
  	'16': '4rem',
  	'18': '4.5rem',
  	'20': '5rem',
  	'22': '5.5rem',
  	'24': '6rem',
  	'26': '6.5rem',
  	'28': '7rem',
  	'30': '7.5rem',
  	'32': '8rem',
  	'34': '8.5rem',
  	'36': '9rem',
  	'38': '9.5rem',
  	'40': '10rem',
  	'42': '10.5rem',
  	'44': '11rem',
  	'46': '11.5rem',
  	'48': '12rem',
  	'50': '12.5rem',
  	'52': '13rem',
  	'58': '14.5rem',
  	'60': '15rem',
  	'64': '16rem',
  	'1/4': '25%',
  	'1/2': '50%',
  	'3/4': '75%',
  	'full': '100%'
  	
  }

  inset

  inset: {
  
  	'0':'0',
  	auto: 'auto',
  	'4':'1rem',
  	'8':'2rem',
  	'16':'4rem',
  	'-4':'-1rem',
  	'-8':'-2rem',
  	'-16':'-4rem',
  
  }

Build Setup

• install dependencies

   $ npm install

• serve with hot reload at localhost:3000

   $ npm run dev

• build for production and launch server

   $ npm run build
   $ npm run start

• generate static project

   $ npm run generate