Skip to content

Latest commit

 

History

History
68 lines (59 loc) · 1.69 KB

README.md

File metadata and controls

68 lines (59 loc) · 1.69 KB

tailwind-iphone

It's a simple model of an iPhone made only with HTML and tailwind. This project was created to demonstrate the use of tailwindcss and how to create a simple model of an iPhone. In the next Projects, this content will be used to create some more features.

Demo

Demo

Result

Configuration

As we are using npm, create a package.json file if it doesn't exist:

npm init -y

Install the dependencies to use tailwindcss:

npm install -D tailwindcss postcss@latest autoprefixer@latest
npx tailwindcss init

In the tailwind.config.js file, add the following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{scss,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the following lines to the style.scss file:

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

To compile the tailwindcss, run the following command:

npx tailwindcss -i ./style.scss -o ./style.css --watch

Test

Add the following code to the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>iPhone</title>
</head>
<body>
  <h2 class="text-4xl font-extrabold text-black">iPhone-Test</h2>
</body>
</html>
npx tailwindcss -i ./style.scss -o ./style.css --watch

To test the project, open the index.html file in your browser.