If you're coming from a developper background, you might not want to use tools you're not familiar with and keep the flexibility of having pure code running your landing page.

WordPress is still popular but damn ugly and often slow. No code design tools exist but you're locked in their ecosystem, you have no control over the performance of the page and exporting to code often lead to big file size.

I'm building a landing page business, so I want the flexibility to be able to export landing pages in code to be able to build a nasty advantage over the WordPress competition.

This is the tools I'm using to build projects for my clients. We'll be using Vite.js, React and TailwindCSS

I'm gonna show you how to do this in 5 minutes or less.

To initiate the project, run:

npm create vite@latest # Choose a name for your poject and select React when presented with the choice. Then select javascript (no SWC) when the next option is shown. cd *project_name* npm install

To start the project, run:

yarn dev

Next to install TailwindCSS, run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest --save-dev

To init TailwindCSS in your projec, run:

npx tailwindcss init -p

Next in your code editor, create a file called style.css and copy this in the file.

@tailwind base; @tailwind components; @tailwind utilities;

Next, you'll replace the content of tailwind.config.js with:

const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { content: [ './src/**/*.jsx', './src/**/*.css' ], theme: { extend: { fontFamily: { sans: ['Inter var', ...defaultTheme.fontFamily.sans], }, }, }, plugins: [ ], }

In App.jsx, delete this line

- import './App.css'

In main.jsx, delete this line

- import './index.css'

Delete both App.css and index.css

Next, in App.jsx, replace the return with

return ( <> <h1 className="text-3xl md:text-5xl text-gray-500 text-center font-semibold mx-auto"> Hello, is this working? </h1> </> )

If you have further questions, feel free to ask them here: jean@outer.ventures